概述

从查看代码中，您需要找到不同的方法。您依赖于元素的相对位置（而不是绝对），这意味着您的delta计算会得到非常奇怪的结果。无论如何我会实施一种不同的方法，因为即使您创建的内容可能会在视觉上做到您想要的东西......您也没有办法检测哪个文章位于哪个区域 - 因为您只是更改了文章的坐标。 ..而不是他们最终进入的容器。如果您需要在用户完成安排工作后对文章做任何事情，这将导致您出现问题。

如果是我......

我实现了一个拖放接口，它实际上允许项目从一个UL列表物理移动（即在DOM中）到另一个UL列表。拖放时你应该立即切换项目，如果你想，你可以在两者之间计算一个漂亮的动画，但动画应该是次要的。在计算动画时，你应该确保你正在读取绝对坐标而不是相对的......这意味着使用$().offset()而不是$().position()

我会使用这样的DOM结构：

<ul class="shelf">
  <li class="article">Article I</li>
  <li class="article">Article II</li>
  <li class="article">Article III</li>
</ul>

<ul class="stock">
  <li class="article">Article IV</li>
  <li class="article">Article V</li>
  <li class="article">Article VI</li>
</ul>

然后当你需要的任何文章发生掉落事件时：

/// create a temporary element to hold our reciprocal position
var placeholder = $('<li class="placeholder"></li>');

/// insert the placeholder before the item we dragged
ui.draggable.before(placeholder);

/// now move off our dragged item and place it just before our drop item
ui.draggable.insertBefore(this);

/// now place our drop item in the DOM after our placeholder
placeholder.after(this);

/// get rid of the placeholder
placeholder.remove();

显然这意味着切换是即时的...但是使用它作为你的基本模型你应该能够计算出一个动画 - 使用.offset（）计算掉落和拖动项目的abs位置 - 你可以为虚假切换设置动画（仅用于视觉效益）......或者您可以延迟即时切换，为移动的项目设置动画，然后使用在dom中放置位置的项目进行最终确定。

其他要点

event.srcElement

应该是：

event.target

srcElement只是Internet Explorer，当您使用jQuery时，jQuery将自动处理为Interner Explorer创建.target属性 - 因此最好使用更受支持的属性。更好的是，您不需要访问event对象来获取您的放弃目标，因为这应该可以通过$(this)

访问

JQuery Ui：移动div元素，奇怪的行为

1 个答案:

概述

如果是我......

其他要点