jQuery UI Draggable Position不刷新?

时间:2013-07-30 16:23:51

标签: jquery jquery-ui position jquery-ui-draggable jquery-ui-droppable

我正在使用jQuery UI Draggable和Droppable。 当拖拽器落在粪便上时,粪便将向下滑动,这将使拖拽器向下推离鼠标。

请参阅此处的示例 http://jsfiddle.net/shane716/tB4L3/2/

我尝试将refreshPositions:true添加到draggable,但它没有解决问题。

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/

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

1 个答案:

答案 0 :(得分:2)

您可以使用帮助: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();
    }
});