javascript - jquery 将元素从可排序列表拖放到另一个列表中仅用于分配(而不是移动)

Question

我们有 2 个可排序列表(必要的可排序)，我希望能够将列表 1 中的元素拖动到列表 2 中的元素上，而不需要移动列表 2 或列表 1 中的任何元素，当我放下该元素时，它会消失返回到列表 1(在相同位置)，并在其中包含列表 2 中的元素的名称。

这就像分配标签的过程。我们应该能够将相同的元素分配给其他列表中的多个元素，并且也能够将列表 2 中的元素标记到列表 1。

我不确定是否必须使用 jqueryUI 中的可拖动或可放置脚本以及如何使用。有什么想法我该怎么做吗？

谢谢!

var sortableOptions = {
  cursor: "move",
  placeholder: "sortable-placeholder",
  tolerance: "pointer",
  opacity: 0.8,
  scroll: true,
  scrollSensitivity: 100,
}
$('.list1').sortable(sortableOptions);
$('.list2').sortable(sortableOptions);

.list1,
.list2 {
  list-style-type: none;
  width: 40%;
  float: left;
  margin-right: 30px;
}

.list1 .item,
.list2 .item {
  border: 1px solid gray;
  padding: 10px;
}

.sortable-placeholder {
  border: 1px dotted #e6e6e6;
  height: 40px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul class="list1">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<ul class="list2">
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</ul>

Answer 1

好吧，首先，如果您阅读过 jQuery 可排序文档，您就会知道可排序对象获得可拖动对象的属性。

因此，当您初始化可排序对象时，您可以设置某些属性来处理可排序事件(“开始”、“停止”、“接收”等)

var sortableOptions = {
  cursor: "move",
  placeholder: "sortable-placeholder",
  tolerance: "pointer",
  opacity: 0.8,
  scroll: true,
  connectWith: '.list1',
  helper: function(e, li) {
    copyHelper = li.clone().insertAfter(li);
    return li.clone();
  },
  stop: function() {
    copyHelper && copyHelper.remove();
  },
  receive: function(e, ui) {
    let string='<small>'+ui.item[0].innerHTML+"</small>"
    ui.item.prev().html(ui.item.prev().html()+string);
    ui.item.remove()
    copyHelper=null;
  },
  scrollSensitivity: 100,
}

请注意connectWith选项 - 它确保您的列表已连接。我准备了一个 fiddle 来重现预期的行为:

JSFiddle .

警告:当前代码不会检查重复项，因此，如果您将 item1 从 list1 传递到 list2 并再次返回，您将在 list1 中将 item1 作为重复项!

编辑

我已经更改了 fiddle 和代码片段以反射(reflect)您的要求，Here

请注意，如果您不断更改列表中的项目，它们会越来越大。我没有更正，因为这可能是您期望的行为。

编辑2

好吧，现在你要求的东西让我摸不着头脑:P

所以，我给你的解决方案是:

将 CSS 更改为:

.list1,
.list2 {
  list-style-type: none;
  width: 40%;
  float: left;
  margin-right: 30px;
}

.list1 .item,
.list2 .item {
  float: left; //THIS ONE IS THE IMPORTANT ONE
  border: 1px solid gray;
  padding: 10px;
}

.sortable-placeholder {
  border: 1px dotted #e6e6e6;
  height: 40px;
  color: #fff;
}

这将使您的列表水平(使您要附加的元素变得非常明显)。

但是，如果您想更改为垂直列表，我的建议是停止使用可滚动列表，除非您确实需要。根据我的研究，可滚动始终会为新元素腾出“空间”，因此您可以:

• 更改 jquery 库(在我看来，这似乎是个坏主意)，
• 您向每个列表元素添加新的事件监听器(mouseup/mousedown/mousemove)。
• 或者您放弃可滚动并“硬编码”您所需的行为。

JSFiddle