Example reference/KyleMit/Geupm/2/(This site requires FQ to see the effect)
In fact, it is an enhanced version of the official jqueryUI shopping cart drag and adds the example, which adds sorting when dragging and dropping.
This is html code
<div >
<h1 class="ui-widget-header">Products</h1>
<div >
<h2><a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
<h2><a href="#">Bags</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div >
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
This is the js code. The red code part is mainly set in the js code. It can be sorted when dragged into it. The orange code part is not very understanding, and it seems useless.
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone",
connectToSortable: "#cart ol"
});
$("#cart ol").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
//hides the placeholder when the item is over the sortable
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//shows the placeholder again if there are no items in the list
$(".placeholder").show();
}
}
});
});
It is also worth mentioning
.ui-state-default seems to be some built-in classes when dragging and dropping, and the corresponding ones are also
The ui-state-hover and other objects should have the effect of dragging objects when dragging and when dragging to the container. The code in this article does not reflect it.
The above is an analysis of the drag and drop sorting problem in jQueryUI. I hope you like it.