JQueryUI:放入容器内,追加并恢复

时间:2011-02-17 18:51:21

标签: javascript jquery draggable droppable revert

我遇到了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属性,但这当然仅适用于第一个丢弃的项目,第二个还需要考虑第一个项目的位置。

感谢。

0 个答案:

没有答案