jquery可拖动还​​原不是像素完美的

Posted 2023-05-08

【中文标题】jquery可拖动还​​原不是像素完美的

【英文标题】：jquery draggable revert is not pixel perfect

【发布时间】：2011-08-02 00:05:07

【问题描述】：

我正在试验 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

.formsectionposition: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; 

它似乎第一次工作，但如果第二次拖动它总是出来，但不一致。有人知道怎么解决吗？

【参考方案1】：

这是 jQuery UI 中已知的bug，带有“revert”和“grid”。在错误 cmets 中有一个丑陋的解决方法，但它涉及更改 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

【讨论】：

知道如何让这个功能以 revert: 'invalid' 的方式工作吗？例如，如果下降到目标上，则不会恢复。

【参考方案2】：

我是这样解决的：

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

此方法的优点是您仍然可以使用可拖动（和可放置）的内置还原功能