我有一个简单的 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/
感谢您的帮助!
最佳答案
看来您的 .element
是相对位置的。因为我没有看到任何 css,所以我假设是 jquery 进行了此调整。放下元素后,相对位置不会重置。在调试控制台中手动将其关闭可以解决您的问题。
这就是导致问题的原因。考虑在放置时重置此属性。
关于javascript - 在 `Draggable` 之后追加 `Droppable`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25095658/