jquery 可拖动恢复不是像素完美的

Question

我正在尝试使用 jQuery 可拖动。当拖动然后恢复时，恢复并不总是将可拖动对象准确地定位回其开始的位置 - 它可能会超出几个像素。

html:

<div id="draggable2" class="formsection ui-widget-content resizable">
<p>I am draggable2</p>
</div>

jquery:

$(".formsection").draggable({
    grid: [20, 20],
    revert: true, 
    zIndex: 9700,
}); 

CSS

.formsection{position:absolute; top:20px; left:20px; width: 220px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; 
             background-color:#eee; border:solid 1px green; }

第一次似乎可以工作，但如果第二次拖动它总是会出问题，但不一致。有谁知道如何解决吗？

Answer 1

这是已知的bug在 jQuery UI 中使用“恢复”和“网格”。 bug 评论中有一个丑陋的解决方法，但它涉及更改 jQuery UI 本身。

我创建了一个更简单的解决方法:

$(".formsection").draggable({
    grid: [20, 20],
    zIndex: 9700,
    stop: function(event, ui) {
        this._originalPosition = this._originalPosition || ui.originalPosition;
        ui.helper.animate( this._originalPosition );
    }
});

第一次拖动 Draggable 时，它​​会保存原始位置，因为这是唯一一次正确的位置，然后连续多次使用 animate 方法和我们保存的位置，而不是使用内置的“恢复”。

Example on jsfiddle