在`Droppable`之后追加`Draggable`

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 );
};

我想在droppable元素之后添加拖動的.element ，以便我仍然可以在那里添加另一個元素。 此外， .element不會在.drop元素后面附加在文檔中的其他位置之后直接添加：自己查看： http : //jsfiddle.net/R8kw6/3/

謝謝你的幫助！

Answer 1

您的.element元素似乎與位置相關。 由於我沒有看到任何CSS，因此我假設是通過jquery進行此調整。 放置項目后，相對位置不會重置。 在調試控制台中手動將其關閉可以解決您的問題。

這就是導致問題的原因。 考慮在拖放時重置此屬性。