javascript - jQuery UI 可拖动快照还原不起作用

Question

我正在为一个元素构建一个窗口管理器，我正在处理这个窗口管理器，它使用 jQuery UI Draggable 和 Resizable，并且在大多数情况下我都在使用它。

我似乎遇到的问题是我需要实现的功能是 Windows 7/8 窗口捕捉到顶部、左侧或右侧。现在我有捕捉工作但是当用户拖动窗口时我希望它恢复到它的旧大小但位置需要以鼠标点为中心并且由于某种原因 jQuery UI 似乎正在恢复拖动开始的位置调整大小后的位置。

演示 http://jsfiddle.net/t5zqcdtm/1/

如何测试这是如果你捕获 2 个打开的窗口之一并拖动它们，使鼠标在顶部的 3px 范围内，你将看到一个全尺寸的轮廓，然后放开窗口将全尺寸但是然后将鼠标移动到标题栏右侧控制按钮的右侧，所以就在“_”的左侧并拖动窗口，您将看到窗口位置不以鼠标为中心

有问题的代码在第 108 行:

var mode = $(ui.helper).data("mode");
var oldStyle = JSON.parse($(ui.helper).data("origin"));
newStyle = clone(oldStyle);
newStyle.left = e.pageX - (
parseInt(oldStyle.width.substring(0, oldStyle.width.length - 2)) / 2) + "px";
newStyle.top = e.clientY + "px";
console.log({
    old: oldStyle,
    new: newStyle
});
$(ui.helper).css(newStyle);
$(ui.helper).data("mode", "");

谁能告诉我为什么窗口会跳到左上角

Answer 1

当 draggable 启动时，会计算出 click 的位置以及 position 和 width被拖动的元素。这里的问题似乎是 click 位置是在您 resize 元素之前计算的，因此 drag 然后用这个 计算点击位置。

您可以访问实例中的这个click位置，并根据您的需要进行修改。例如，您可以确定 click 是否在窗口的新宽度之外，如果是，则相应地重新定位。像这样:

start: function (e, ui) {
                    ...
    //At the end of your start function
    //you check the actual position of the click
    var clickLeft = $(this).draggable('instance').offset.click.left;
    //If this click is out of the window, or in the top right icons
    if (clickLeft > ($(ui.helper).width() - 50)) {
        //You set the click left to wherever you need
        $(this).draggable('instance').offset.click.left = $(ui.helper).width() - 50;
   }

}

http://jsfiddle.net/u95ba45k/1/