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>

我的目标是使元素Draggable能够改变它们的顺序。我开始向每个元素添加一个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 handler中：

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

我希望在droppable元素之后添加拖动的.element，这样我仍然可以添加另一个元素。此外，.element不会在.drop元素之后直接添加其在文档中附加的som：自己查看：http://jsfiddle.net/R8kw6/3/

感谢您的帮助！

Answer 1

您的.element似乎是位置相对的。因为我没有看到任何css，我假设它正在进行这种调整的jquery。放下项目后，位置相对不会重置。在调试控制台中手动关闭它可以解决您的问题。

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

在`Droppable`之后附加`Draggable`

1 个答案: