jquery draggable revert不是像素完美

Question

我正在尝试使用jQuery draggable.当拖动然后恢复时,恢复并不总是将可拖动对象精确地定位到它开始的位置 - 它可以是几个像素.

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

这是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 方法和我们保存的位置，而不是使用内置的“恢复”。

jsfiddle 上的示例