1

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

虽然就结果而言这非常有效,但处理“还原”的动画并没有像我想要的那样表现。问题是拖动显然是通过设置“位置:相对”然后更改“顶部”和“左侧”css属性来实现的。一旦项目附加到新容器(发生在还原动画之前),它就会跳转到新位置,因为它现在相对于新容器定位。还原动画现在从新位置开始。

将项目附加到新容器后,有什么方法可以让我获得平滑的还原动画?也许我正在以完全错误的方式解决这个问题,所以请不要犹豫,提出任何不同的方法。

我一直在尝试根据新容器的绝对位置重新计算 css left 和 top 属性,但这当然只适用于第一个放置的项目,第二个还必须考虑第一个项目的位置。

谢谢。

4

0 回答 0