我们有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);
答案 0 :(得分: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
选项-确保您的列表已连接。
我准备了一个小提琴,可以重现预期的行为:
警告::当前代码不会检查重复项,因此,如果将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总是会为新元素腾出“空格”,所以您要么: