0

请看这个jsfiddle：

http://jsfiddle.net/5hBQ4/2/

这应该允许某人将物品放入库存或货架中。如果您将同一对文章移动两次，您会看到目标位置是应有位置的两倍。

我觉得我做的事情不对。必须有一个干净的方法来做到这一点。欢迎任何想法:-)

4

1 回答 1

2

概述

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

如果是我...

我将实现一个拖放界面，它实际上允许将项目从一个 UL 列表物理移动（即在 DOM 中）到另一个。拖放时您应该立即切换项目，如果您愿意，您可以在两者之间计算出漂亮的动画，但动画应该是次要的。在计算动画时，您应该确保您正在读取绝对坐标而不是相对坐标......这意味着使用$().offset()not$().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>

然后，当任何文章发生 drop 事件时，您只需要：

/// 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() 来计算放置和拖动项目的绝对位置 - 您可以制作动画一个虚假的切换（只是为了视觉上的好处）......或者你可以延迟即时切换，动画项目移动，然后完成项目在dom中交换位置。

其他要点

event.srcElement

应该：

event.target

srcElement 仅适用于 Internet Explorer，并且当您使用 jQuery 时，jQuery 将自动处理为内部资源管理器创建 .target 属性 - 所以最好使用更受支持的属性。更好的是，您不需要访问该event对象来获取您的放置目标，因为这应该可以通过$(this)

于 2012-09-10T14:04:49.307 回答