Question

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

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

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

谢谢！

.anc {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-app">
    <a class="anc">Link1</a>
    <a class="anc">Link2</a>
    <a class="anc">Link3</a>
    <a class="anc">Link4</a>
</div>
<button>Remove class</button>

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

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选项-确保您的列表已连接。我准备了一个小提琴，可以重现预期的行为：

JSFiddle。

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

编辑

我更改了小提琴和代码段以反映您的要求，Here

请注意，如果您不断在列表之间更改项目，它们将逐渐变大。我尚未纠正，因为这可能是您期望的行为。

EDIT2

好吧，现在您要的东西让我挠头：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;
}

这将使您的列表保持水平（非常清楚地表明要添加的元素）。

但是，如果您希望更改为垂直列表，我的建议是停止使用可滚动显示，除非您确实需要。根据我的研究，scrollable总是会为新元素腾出“空格”，所以您要么：

更改jquery库（imo，似乎是个坏主意），
您将新的事件侦听器（mouseup / mousedown / mousemove）添加到每个列表元素。
或者您放弃可滚动和“硬编码”所需的行为。

JSFiddle

jQuery拖放元素从可排序列表到另一个仅分配（不移动）

1 个答案: