拖拽一次删除多个项目，作为堆栈

Question

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

我一直在关注现有的Drag＆amp; amp;删除实现并进行多拖动工作，但我似乎无法找到一个允许我使用自己的实现覆盖拖动代理的库。

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

Answer 1

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

＆＃13;

＆＃13;

$(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')
  });
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://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>

＆＃13;

＆＃13;

＆＃13;