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，带有“revert”和“grid”。错误评论中有一个丑陋的解决方法，但它涉及更改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时，它会保存orginalPosition，因为这是唯一正确的时间，然后连续使用animate方法和我们保存的位置，而不是使用内置的“revert”。

Example on jsfiddle

Answer 2

我解决了这个问题：

$( ".formsection" ).bind( "dragstart", function(event, ui) {
    ui.originalPosition.top = $(this).position().top;
    ui.originalPosition.left = $(this).position().left;
});

这种方法的优点是你仍然可以使用draggable（和droppable）的内置还原功能

jquery draggable revert不是像素完美

2 个答案:

Example on jsfiddle