如何从jquery可排序连接列表中删除重复项？ [英] how to remove duplicates from jquery sortable connected lists?
问题描述
这是我的jquery sortable代码。我想在拖动其中的元素后从sortable2和sortable3中删除重复项。我尝试了很多方法，但我失败了。请给我一个完整的工作代码，以便我可以在我的脚本上实现它。
This is my code for jquery sortable. I want to remove duplicates from sortable2 and sortable3 after dragging the element within it. I tried so many ways but I failed. Please give me a full working code so that I can implement it on my script.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; width: 200px; height: 200px; border: solid 1px black; }
#sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function () {
$("#sortable2").sortable({});
$("#sortable3").sortable({});
$("#sortable1").sortable({ });
$( "#sortable1 li" ).draggable({
connectToSortable: "#sortable2,#sortable3",
helper: "clone",
revert: "invalid"
});
});
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" id="k1">Item 1</li>
<li class="ui-state-default"id="k2">Item 2</li>
<li class="ui-state-default"id="k3">Item 3</li>
<li class="ui-state-default"id="k4">Item 4</li>
<li class="ui-state-default"id="k5">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>
<ul id="sortable3" class="connectedSortable">
</ul>
</body>
</html>
推荐答案
我在jsFiddle中做了一个例子来解决你的问题，或者我认为你的问题是什么。
I made an example in jsFiddle to solve your problem, or what I think your problem is.
测试它，并告诉我这是否是你需要的。
Test it, and tell me if this is what you need.
http://jsfiddle.net/jKzWp/16 /
我制作了一个函数来测试新项是否已经在列表中，如果是，则从列表中删除该项。
I made a function which tests whether the new item is already in the list, and if so, the item is removed from the list.
这是js代码：
$(function () {
$("#sortable2").sortable({
receive: function (event, ui) {
var pasteItem = checkList("sortable2", $(this).data().uiSortable.currentItem);
if (!pasteItem){
$(this).data().uiSortable.currentItem.remove();
}
}
});
$("#sortable3").sortable({
receive: function (event, ui) {
var pasteItem = checkList("sortable3", $(this).data().uiSortable.currentItem);
if (!pasteItem){
$(this).data().uiSortable.currentItem.remove();
}
}
});
$("#sortable1").sortable({ });
$( "#sortable1 li" ).draggable({
connectToSortable: "#sortable2,#sortable3",
helper: "clone",
revert: "invalid"
});
});
function checkList(listName, newItem){
var dupl = false;
$("#" + listName + " > li").each(function(){
if ($(this)[0] !== newItem[0]){
if ($(this).html() == newItem.html()){
dupl = true;
}
}
});
return !dupl;
}
祝你好运，
干杯
Good luck with that, Cheers
这篇关于如何从jquery可排序连接列表中删除重复项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
