jQueryUI drag-and-drop sorting sample Analysis _jquery

Example reference http://jsfiddle.net/KyleMit/Geupm/2/(this station needs FQ to see the effect)

In fact, the jQueryUI official shopping cart drag and drop add an example of the enhanced version, is in the drag and drop when the order added

This is the HTML code

Copy Code code as follows:

<div id= "Products" >
&LT;H1 class= "Ui-widget-header" >Products<div id= "Catalog" >
<div>
<ul>
<li>lolcat shirt</li>
<li>cheezeburger shirt</li>
<li>buckit shirt</li>
</ul>
</div>
<div>
<ul>
<li>zebra striped</li>
<li>black leather</li>
<li>alligator leather</li>
</ul>
</div>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id= "Cart" >
&LT;H1 class= "Ui-widget-header" >shopping cart<div class= "Ui-widget-content" >
<ol>
<li class= "placeholder" >add your items here</li>
</ol>
</div>
</div>

This is the JS code in the JS code mainly in the red Code part of the set can be dragged into the sort, the Orange code part is not very understanding, as if useless

Copy Code code as follows:

$ (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 was 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 ();
}
}
});
});

In addition, it is worth mentioning that

. Ui-state-default seems to be some of the built-in classes when dragged, and the corresponding
Ui-state-hover and so on should have to drag the object in the drag, and drag to the container when the effect, this article does not reflect the code.

The above is about the jQueryUI of drag and drop sorting problem analysis, I hope you can enjoy.