jQuery UI 可拖动快照恢复不工作

Question

我正在为我正在处理的项目构建一个 window 管理器 window 管理器使用 jQuery UI 可拖动和可调整大小以及在大多数情况下，我都能正常工作。

我似乎遇到的问题是我需要实现的功能是 windows 7/8 window 对齐到顶部、左侧或右侧。现在我有捕捉工作但是当用户拖动 window 我希望它恢复到它的旧大小但是位置需要以鼠标点为中心并且由于某种原因 jQuery UI 一旦我 re-size 它似乎将位置恢复到拖动开始位置。

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

如何测试这个，如果你抓住 2 个打开的 windows 之一并拖动它们，使鼠标在顶部的 3px 范围内，你将看到一个完整尺寸的轮廓，然后松开并且 window 将全尺寸但是然后将鼠标移动到标题栏右侧控制按钮的右侧，所以就在“_”的左侧并拖动 window 你会看到 window 位置没有以鼠标为中心

有问题的代码在第 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", "");

谁能告诉我为什么window然后跳到左上角

Answer 1

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

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

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/

jQuery UI 可拖动快照恢复不工作

jQuery UI Draggable Snap Restore not working

javascript

css

jquery

jquery-ui

jquery-draggable