javascript - 在放置另一个可拖动元素时将可拖动元素交换为鼠标光标

Question

我已经看到几个关于在放置时交换两个可拖动元素的问题，但我的情况有点不同。

基本上，我有一堆放置在(非线性)网格中的可拖动元素。在许多情况下，网格将完全填充数据。我们希望允许用户轻松地重新排列网格元素，但由于网格是非线性的，因此无法使用“可排序”。而且由于网格已完全填充，当一个被拖到另一个上时直接交换两个网格位置并不是理想的解决方案(因为我们不是试图将仅三个位置重新排列成某种脑筋急转弯)。

我们想要做的是在拖动网格元素(称为 A)时进行正常的“拖动”操作，但是当元素随后被放到所需的目的地(其中已经有另一个网格项目)时，称之为 B)，那么 A 应该取代 B 的位置，然后 B 应该“捕捉到”鼠标光标，就像用户单击并拖动它一样。这显然会稍微扰乱鼠标交互，因为现在用户没有按下鼠标按钮，而是在周围拖动一个元素，因此要释放该元素，他要么单击 A 来自的空单元格，要么单击另一个网格元素 C ，此时 B 将取代 C，C 现在将“附加”到鼠标光标。

我仔细研究了“可拖动”文档和源代码，似乎没有办法按照我想要的开箱即用方式对其进行精确配置，但我很确定我可以扩展可拖动小部件并覆盖它的几个方法来实现我想要的，而不是必须从头开始编写我自己的解决方案。如果它使它更容易，那么与拖动事件相比，首先用于触发拖动的鼠标事件是单击还是单击对我来说真的无关紧要。

需要说明的是，这是我正在寻找的一种交互图:

Original Setup - ^ is mouse cursor
[A]  ^  [C]
[B]     [D]

Now click and drag on A. Result is:
[ ]^A   [C]
[B]     [D] 

Now drag over B and release. Result is:
[ ]     [C]
[A]^B   [D]

B is now acting as if it's being dragged, but mouse button is not held down. Move
cursor over C and click mouse button. Result is:
[ ]     [B] ^C
[A]     [D]

B has taken C's place, and C is now following the mouse cursor. Again, mouse 
button is not being held down. Move cursor over empty cell and click mouse 
button. Result is:
[C] ^   [B]
[A]     [D]

Now there is nothing attached to the mouse cursor.

Answer 1

好吧，由于甚至没有人尝试回答我的问题，我想出了一个相当简单的方法来自行完成此任务。在这种情况下，我的救星竟然是 jquery.simulate 、jquery.simulate.ext 和 jquery.simulate.drag-n-drop插件。使用这些在一组元素(或者在拖放插件的情况下，单个元素)上模拟特定的 native 浏览器事件是微不足道的。这意味着我可以简单地使用 jQueryUI droppable 的“drop”回调来完成我需要的:

drop: function (e, ui) {
    var $targ = $(e.target);
    ui.draggable.detach().appendTo($targ).css({top: 0, left: 0});
    $targ.find('.ui-draggable .handle').simulate('drag', {});
}

就是这样!仅此而已。这是一个演示实际解决方案的 fiddle :http://jsfiddle.net/isochronous/mD8uM/

更新:事实证明处理可拖动的“还原”行为实际上是最难的部分。我最终创建了自己的扩展 $.ui.draggable 的小部件来处理这个问题。我已经更新了 fiddle 并添加了评论来解释它是如何工作的，以防万一有人感兴趣。