jQuery UI 可拖动位置不刷新？

Posted 2023-05-08

【中文标题】jQuery UI 可拖动位置不刷新？

【英文标题】：jQuery UI Draggable Position not refreshing?

【发布时间】：2013-07-30 22:00:17

【问题描述】：

我正在使用 jQuery UI Draggable 和 Droppable。 当可拖动对象位于可放置对象上方时，可放置对象将向下滑动，这会将可拖动对象向下推并远离我的鼠标。

请看这里的例子 http://jsfiddle.net/shane716/tB4L3/2/

我尝试将 refreshPositions:true 添加到可拖动对象中，但并没有解决问题。

html 代码

<table>
<tr class="droppable"><td>Drop to here</td></tr>
<tr id="slidedown" style="display:none">
    <td>
        <div>
        A<br />
        A<br />
        A<br />
        A<br />
        A<br />
        </div>
    </td>
</tr>
<tr><td class="draggable">Drag Me</td></tr>

jQuery 代码

$(".draggable").draggable(
    revert: "invalid", 
    cursor: "move",
    opacity: 0.7,
    refreshPositions: true,
);

$(".droppable").droppable(
    greedy: true,
    accept: ".draggable",
    activeClass:"droppable-active",
    tolerance: "pointer",
    over: function(event, ui) 
    $("#slidedown").slideDown(duration:2000);

);

带有“助手”的事件，“助手”不会恢复到可拖动对象的位置。 http://jsfiddle.net/shane716/tB4L3/3/

我的问题是如何保持可拖动的位置与鼠标的位置相同

【问题讨论】：

当我给你的 'drag me' div 一个 position: absolute 它对我来说很好

【参考方案1】：

您可以使用助手：http://jsfiddle.net/tB4L3/4/

$(".draggable").draggable(
    revert: "invalid",
    cursor: "move",
    opacity: 0.7,
    helper: function () 
        return $(this).clone().appendTo('body');
    ,
    start: function () 
        $(this).hide();
    ,
    stop: function () 
        $(this).show();
    
);