我遇到了JQueryUI。具体来说,我有以下html剪切:
<div class="from">
<div class"item">Item 1</div>
<div class"item">Item 2</div>
<div class"item">Item 3</div>
</div>
<div class="to"></div>
现在我想通过JQueryUI库将项目拖放到“to”框上。因此,我使用此JavaScript代码段:
$('.item').draggable({
revert: true
});
$('.to').droppable({
drop: function(event, ui) {
ui.draggable.appendTo(this);
}
});
虽然就结果而言这是完美的,但处理'revert'的动画并不像我想要的那样。问题是拖动显然是通过设置“position:relative”然后改变“top”和“left”css属性来实现的。一旦项目附加到新容器(在恢复动画之前发生),它就会跳转到一个新位置,因为它现在相对于新容器定位。恢复动画现在从新位置开始。
将项目附加到新容器后,有什么方法可以获得平滑的还原动画吗?也许我完全以错误的方式解决这个问题,所以请毫不犹豫地提出任何不同的方法。
我一直在尝试根据新容器绝对位置重新计算css left和top属性,但这当然仅适用于第一个丢弃的项目,第二个还需要考虑第一个项目的位置。
感谢。