拖动多个选定元素答案

【问题标题】：Dragging multiple selected elements拖动多个选定元素
【发布时间】：2011-06-30 15:18:45
【问题描述】：

我对使用 (JQuery (Ui)) 实现拖动多个选定元素的最佳方法感兴趣。

目前我正在使用这段代码

// Make all divs inside draggableArea draggable

$("#dragableArea div").draggable({

     start : function() {

     }

     drag : function() {
          // Calculate position of other selected elements here
          // by hand
     }

     stop : function() {

     }

});

我很想知道是否有更好的方法来实现同样的目标？我想在所有选定项目上触发拖动事件，以便在拖动其中任何一个时它们会自动移动。有可能吗，如果有的话（至少在理论上）？

【问题讨论】：

标签： javascript jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

试试这个：http://jsfiddle.net/maniator/zVZFq/5/

根据我在这里的回答（和 cmets）：How do I drag multiple elements at once with JavaScript or jQuery?

点击激活多重拖动。

【讨论】：

虽然您的示例运行良好，但当您单击红色方块时，它会回到您单击它变成红色方块之前的原始位置。
@ivan - 我承认它有点问题，但它是一个开始
可以理解，你这个例子的重点是可以进行多次拖动。 +1。
感谢代码示例，但最后我最终使用了来自threedubmedia 的这个“插件”。太棒了:)

【解决方案2】：

这是一个基于 Neal 解决方案的工作组移动，但可能更具可读性（无论如何对我来说）和 cmets：http://jsfiddle.net/stevea/CrJbQ/。它的工作方式类似于图形程序的“组”功能。单击要分组的框。这将他们置于“团体平面”上。通过拖动组平面或任何组合框来移动组平面。单击编组平面以取消编组框的编组，将它们留在新位置。

<div id='box1' class='box'></div>
<div id='box2' class='box'></div>
<div id='box3' class='box'></div>
<div id='box4' class='box'></div>
<div id='group'></div>  // group plane

【讨论】：