如何解决jQuery可排序的可拖放或可拖放的多个列表到一个列表并还原
我正在制作一个可分类的杂货清单,但我想不出从分类清单中删除某项并将其返回原始类别的最佳方法。
<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#sortable {border: 1px solid #000; min-height:100px;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable({
connectWith: '.connectedList'
});
$( ".draggable" ).draggable({
connectToSortable: "#sortable",revert: "invalid"
});
$( "ul,li" ).disableSelection();
} );
</script>
</head>
<body>
<h3>Fruit</h3>
<ul id="FruitCollection" class="fruits connectedList">
<li class="draggable">Apples</li>
<li class="draggable">Oranges</li>
</ul>
<h3>Meat</h3>
<ul id="MeatCollection" class="meats connectedList">
<li class="draggable">Beef</li>
<li class="draggable">Chicken</li>
<li class="draggable">Pork</li>
</ul>
<h3>Dairy</h3>
<ul id="DairyCollection" class="dairy connectedList">
<li class="draggable">Cheese</li>
<li class="draggable">Milk</li>
<li class="draggable">Sour Cream</li>
<li class="draggable">Yogurt</li>
</ul>
<h2>Grocery List</h2>
<ul id="sortable">
</ul>
</body>
</html>
我不确定connectWith的工作原理。使用可拖动,可放置或可排序的组合,这似乎已经解决了问题。每个类别的项目只有从可排序项中删除后,才应返回到该类别。
例如,将 cheese 拖到杂货店列表中,然后将其拖到带边框的可排序列表中,以将其删除。奶酪应该回到乳制品清单。
解决方法
添加用户可以单击的删除类型的图标可能会更容易。示例:
$(function() {
function returnToList(item) {
var t = $("." + $(item).data("list"));
$(item)
.detach()
.appendTo(t);
$(".ui-icon",item).remove();
}
function addDel(item) {
$("<span>",{
class: "ui-icon ui-icon-close"
}).appendTo(item);
}
$("#sortable").sortable({
stop: function(e,ui) {
if ($(".ui-icon",ui.item).length < 1) {
addDel(ui.item);
}
}
});
$(".items li").draggable({
connectToSortable: "#sortable",revert: "invalid"
});
$("ul,li").disableSelection();
$(".list").on("click","li .ui-icon-close",function() {
returnToList($(this).parent());
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
position: relative;
}
.items {
width: 175px;
display: inline-block;
float: left;
}
.grocery {
width: 200px;
display: inline-block;
margin-left: 20px;
}
#sortable {
border: 1px solid #000;
min-height: 100px;
}
.list li span {
position: absolute;
right: 4px;
padding: 2px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<div class="items list">
<div class="ui-widget-header">Fruit</div>
<ul id="FruitCollection" class="fruits">
<li class="ui-widget-content" data-list="fruits">Apples</li>
<li class="ui-widget-content" data-list="fruits">Oranges</li>
</ul>
<div class="ui-widget-header">Meat</div>
<ul id="MeatCollection" class="meats">
<li class="ui-widget-content" data-list="meats">Beef</li>
<li class="ui-widget-content" data-list="meats">Chicken</li>
<li class="ui-widget-content" data-list="meats">Pork</li>
</ul>
<div class="ui-widget-header">Dairy</div>
<ul id="DairyCollection" class="dairy">
<li class="ui-widget-content" data-list="dairy">Cheese</li>
<li class="ui-widget-content" data-list="dairy">Milk</li>
<li class="ui-widget-content" data-list="dairy">Sour Cream</li>
<li class="ui-widget-content" data-list="dairy">Yogurt</li>
</ul>
</div>
<div class="grocery list">
<div class="ui-widget-header">Grocery List</div>
<ul id="sortable"></ul>
</div>
<div class="ui-helper-clearfix"></div>
</div>
您可以利用Drag事件,但是需要一个目标。然后,事件回调将执行与Click相同的操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。