追加' Draggable '在' dropable '之后

Append `Draggable` after `Droppable`

本文关键字：之后 dropable Draggable 追加      更新时间：2023-09-26

我有一个简单的html布局:

<div class="row">
    <div class="element">First Box</div>
    <div class="element">Second Box</div>
    <div class="element">Third Box</div>   
</div>
<div style="display:none">
    <div class="drop">Drop Here</div>
</div>

我的目标是使元素可拖拽，以便可以改变它们的顺序。我开始为每个元素添加一个Drop元素，在本例中是.drop:

$('.element').each(function(){
    $(this).after($('.drop').first().clone());
});

然后把元素设置为可拖拽的，把拖放的设置为可拖放的:

$('.element').draggable({
    stack: '.element',
    cursor: 'move',
    revert: true
});
$('.drop').droppable( {
    accept: '.element',
    hoverClass: 'hovered',
    drop: handleCardDrop
});

它基本上工作，但我的问题出现在drop处理程序:

function handleCardDrop( event, ui ){
    $(this).after(ui.draggable);
    ui.draggable.draggable( 'option', 'revert', false );
};

我想把拖的.element添加到可放元素之后，这样我仍然可以在那里添加另一个元素。此外，.element不是直接添加在.drop元素之后，而是附加在文档中的某个地方:自己查看:http://jsfiddle.net/R8kw6/3/

谢谢你的帮助!

看来你的.element s是相对位置的。因为我没有看到任何css，所以我假设是jquery在做这个调整。放置物品后，相对位置不会重置。在调试控制台中手动关闭它可以解决您的问题。

这就是导致问题的原因。

相关文章：