[英]jQuery sortable and droppable list
So what i'm looking for is a way for me to use both sortable and droppable on the same element.所以我正在寻找的是一种让我在同一个元素上同时使用可排序和可放置的方法。 Lets say i have a list of 5 elements, these are all sortable.
假设我有一个包含 5 个元素的列表,这些元素都是可排序的。 What i'm trying to do is when one element is dropped ontop of another one, it will append to that element and go out of the list, example:
我想要做的是当一个元素被放到另一个元素之上时,它会附加到该元素并从列表中消失,例如:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
Element has been dropped元素已被删除
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>List Item Dropped</li>
</ul>
</li>
</ul>
If you have a clue an answer or a guideline on how to do this would be very appreciated!如果您有线索,请提供有关如何执行此操作的答案或指南,我们将不胜感激!
HTML: HTML:
<ul id="theUL">
<li class="item">List Item</li>
<li class="item">List Item</li>
<li class="item">List Item</li>
<li class="item">List Item</li>
<li class="item">List Item</li>
</ul>
Here is the sortable
code for your UL.这是您的 UL 的
sortable
代码。 You need to config the change
event.您需要配置
change
事件。 Change event occurs when sort event happens, else, it means the drop event happens.排序事件发生时发生更改事件,否则表示丢弃事件发生。
$("#theUL").sortable({
revert: true,
items: "li",
change: function( event, ui ) {ui.helper.addClass("change");},
beforeStop: function( event, ui ) {ui.helper.removeClass("change");}
});
In droppable code, check if change occurs, if not, then it means dropped.在 droppable 代码中,检查是否发生更改,如果没有,则表示已删除。
$(".item" ).droppable({
accept: function(el) {
return el.hasClass('item');
},
drop: function (event, ui) {
item=ui.draggable;
if(!item.hasClass('change')){
//dropped!
}
}
});
Consider that you can do this without using Droppable.考虑到您可以在不使用 Droppable 的情况下执行此操作。 It can be done with
connectWith
.它可以通过
connectWith
来完成。 It just needs the addition of a second List already there.它只需要在那里添加第二个列表。
$(function() { $(".sort").sortable({ connectWith: ".sort", handle: "span.ui-icon", placeholder: "ui-state-highlight" }); $("#sortable").disableSelection(); });
.top, .child { list-style-type: none; margin: 0; padding: 0; width: 60%; } .child { padding-bottom: 0.5em; } .top li { margin: 0 3px 3px 3px; padding: 0.4em; } .top li span { margin: 3px; cursor: grab; }
<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> <ul class="sort top"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1 <ul class="sort child"> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 1.1</li> </ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 2 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 3 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 4 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 5 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 6 <ul class="sort child"></ul> </li> <li class="item ui-state-default"><span class="ui-icon ui-icon-grip-dotted-vertical"></span>Item 7 <ul class="sort child"></ul> </li> </ul>
If you want, you can make a function that appends all of these for you in initialization.如果需要,您可以创建一个函数,在初始化时为您附加所有这些。
$(function() {
function makeChildLists(target, class){
$("li", target).each(function(i, el){
$("<ul>", {
class: "child " + class
}).appendTo(el)
});
}
makeChildLists($(".top"), "sort");
$(".sort").sortable({
connectWith: ".sort",
handle: "span.ui-icon",
placeholder: "ui-state-highlight"
});
$("#sortable").disableSelection();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.