jQuery UI Draggable Snap Restore不工作

Question

我在爲項目建立一個窗口管理器的過程中，我正在使用這個窗口管理器使用jQuery UI Draggable和Resizable，並且大部分我都工作。

我似乎遇到的問題是我需要實現女巫的功能是Windows 7/8窗口對齊頂部，左側或右側。現在我有捕捉工作，但後來拖動窗口時，我希望它恢復到它的舊尺寸，但位置需要以鼠標點爲中心，由於某種原因，jQuery UI似乎要恢復到拖動開始的位置一旦我重新定位它的位置。

DEMO 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。這裏的問題似乎是在您的resize元素之前計算了click的位置，因此drag隨後用此click位置進行計算。

您可以訪問instance中的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/