jquery - 将 LI 从 UL A 拖到 UL B 并从 UL A 中删除？
Posted
技术标签:
【中文标题】jquery - 将 LI 从 UL A 拖到 UL B 并从 UL A 中删除？【英文标题】：jquery - drag an LI from UL A to UL B and remove from UL A? 【发布时间】：2013-04-06 00:03:45 【问题描述】：我有两个列表，第二个列表是sortable，我可以从第一个列表拖到第二个列表，但不知道如何从第一个列表中删除。
如果我删除 helper: "clone"，项目 (li) 确实会被删除，但拖放操作效果不佳（晃动，不顺畅）。
（奖励积分 - 空时也删除左侧 UL）
小提琴：http://jsfiddle.net/Nme9a/
<html>
<head>
<style>
#categorizer padding: 2px;
#list_to_process, #categories color: blue; background-color: green; border: solid; border-width: 4px
ul padding: 10px; margin: 50px; float:left; list-style:none;
li color: yellow; padding: 25px 80px; cursor: move;
li:nth-child(even) background-color: #000
li:nth-child(odd) background-color: #666
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
$("#categories").sortable(
revert: true
);
$("li.to_process").draggable(
connectToSortable: "#categories",
helper: "clone",
revert: "invalid"
);
);
</script>
</head>
<body>
<div id="categorizer">
<ul id="list_to_process">
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
</ul>
<ul id="categories">
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：您可以将“接收”选项中的回调传递给 sortable()，如下所示：
$(document).ready( function()
$("#categories").sortable(
revert: true,
receive: function(evt, ui)
ui.item.remove();
);
$("li.to_process").draggable(
connectToSortable: "#categories",
revert: "invalid",
helper: "clone"
);
);
[迈克尔编辑]
请注意，我还添加了：
$('#list_to_process li').length == 0)
$('#list_to_process').remove();
在ui.item.remove(); 之后，这样空的UL 仍然有填充和边框，即
将被删除。
【讨论】：
以上是关于jquery - 将 LI 从 UL A 拖到 UL B 并从 UL A 中删除？的主要内容，如果未能解决你的问题，请参考以下文章