Drag Multiple是一个简单的jQuery/jQuery UI插件，允许用户将多个DOM元素作为一个组进行拖动。

参见：

• 10个最佳高级拖放插件

如何使用它:

1.加载必要的jQuery和jQuery UI库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2.使用已选择uiclass.

<div id="draggable1" class="box ui-selected">
  <p>Drag 1</p>
</div>
<div id="draggable2" class="box ui-selected">
  <p>Drag 2</p>
</div>
<div id="draggable3" class="box ui-selected">
  <p>Drag 3</p>
</div>

3.初始化插件以在这些元素上启用Drag Multiple功能。

$(function () {
  $(".box").draggable({
    multiple: true,
  });
});

4.指定如何处理“拖动多个”功能。

// specify draggable elements
multiple.items = function getSelectedItems() {
  return $(".ui-draggable.ui-selected");
};

// specify when to cancel drag multiple
multiple.beforeStart = function beforeDragStart(jqEvent, ui) {
  // make sure target is selected, otherwise deselect others
  if (!(this.is('.ui-draggable') && this.is('.ui-selected'))) {
    $(".ui-draggable").removeClass('ui-selected');
    return false;
  }
};

// called before each draggable.drag event
multiple.beforeDrag = function beforeDrag(jqEvent, ui) {
  // ...
};

// called before draggable.stop event.
multiple.beforeStop = function beforeDragStop(jqEvent, ui) {
  // ...
};

// all selected elements move to the top of the stack when one of them is dragged
multiple.stack

预览截图

将多个元素作为一个组拖动 jQuery拖动多个