一次拖放多个项目，作为堆栈答案

【问题标题】：Drag & drop multiple items at once, as a stack一次拖放多个项目，作为堆栈
【发布时间】：2017-01-23 11:00:24
【问题描述】：

我正在尝试实现一个允许我一次拖动多个选定项目的系统，但是一旦开始拖动，它们应该折叠成一个堆栈，其中一个整数显示正在拖动的项目数量，而不是保留它们的单个项目相对位置。

我一直在查看现有的拖放实现，并获得了多拖工作，但我似乎无法找到一个库，允许我用我自己的实现覆盖拖动代理。

任何人都知道如何做到这一点？还是我应该考虑使用 HTML5 Drag & Drop API 或其他库编写自己的拖放解决方案？

【问题讨论】：

标签： javascript jquery angular drag-and-drop

【解决方案1】：

您可以使用helper 来实现此目的。

$(document).ready(function() {
  $('#list-items [data-action="draggable"]').draggable({
    revert: true,
    helper: function() {
      var selected = $('#list-items [data-action="draggable"].selected');
      if (selected.length === 0) {
        $(this).addClass('selected');
        selected = $(this);
      }
      var container = $('<div/>').attr('id', 'draggingContainer');
      container.append('<div>' + selected.length + '</div>')
      container.append(selected.clone());
      return container;
    }
  });
  $('#list-items [data-action="draggable"]').click(function() {
    $(this).toggleClass('selected')
  });
});

.selected {
  background-color: rgba(13, 173, 253, 0.37)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul id='list-items'>
  <li data-action='draggable'>elem 1</li>
  <li data-action='draggable'>elem 2</li>
  <li data-action='draggable'>elem 3</li>
  <li data-action='draggable'>elem 4</li>
  <li data-action='draggable'>elem 5</li>
  <li data-action='draggable'>elem 6</li>
</ul>

【讨论】：