Question

我正在为一个项目构建一个窗口管理器的过程我正在使用这个窗口管理器使用jQuery UI Draggable和Resizable，并且在大多数情况下我都有它工作。

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

样本 http://jsfiddle.net/t5zqcdtm/1/

如何测试这个是如果你抓住2个打开的窗口中的一个并拖动它们以便鼠标在顶部的3px范围内你将看到完整尺寸的轮廓然后放开并且窗口将是全尺寸然后然后将鼠标移动到标题栏右侧控制按钮的左侧，这样就离开了＃34; _＆＃34;并拖动窗口，您将看到窗口位置不以鼠标为中心

有问题的代码在第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中的instance位置，并根据需要进行修改。例如，您可以确定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/

jQuery UI Draggable Snap Restore无法正常工作

1 个答案: