javascript - 在 `Draggable` 之后追加 `Droppable`

Question

我有一个简单的 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
});

它基本上可以工作，但我的问题出现在放置处理程序中:

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

我想将拖动的 .element 添加到可放置元素之后，以便我仍然可以添加另一个元素。此外，.element 不是直接添加在文档中附加的 .drop 元素之后:请自行查看:http://jsfiddle.net/R8kw6/3/

感谢您的帮助!

Answer 1

看来您的 .element 是相对位置的。因为我没有看到任何 css，所以我假设是 jquery 进行了此调整。放下元素后，相对位置不会重置。在调试控制台中手动将其关闭可以解决您的问题。

这就是导致问题的原因。考虑在放置时重置此属性。