Example of dragging and sorting in jqueryUI _ jquery-js tutorial

This article mainly analyzes the drag-and-drop Sorting Problem in jQueryUI through specific examples. It is very practical and recommended to our friends here. Example reference http://jsfiddle.net/KyleMit/Geupm/2/ (this site requires FQ to see the effect)

In fact, it is an enhanced version of the jqueryUI official shopping cart drag-and-drop add example.

This is the html code.

The Code is as follows:

Products

T-Shirts

• Lolcat Shirt


• Cheezeburger Shirt


• Buckit Shirt

Bags

• Zebra Striped


• Black Leather


• Alligator Leather

Gadgets

• IPhone


• IPod


• IPad

Shopping Cart

1. Add your items here

This is the js Code mainly set the red code section in the js Code to be sorted when it can be dragged into. The Orange code section does not quite understand and seems useless.

The Code is 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 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 that

. Ui-state-default seems to be some built-in classes during drag and drop, corresponding
The ui-state-hover and so on have the effects of the objects that can be dragged when they are being dragged, and when they are dragged to the container. The code in this article is not reflected.

The above is an analysis of the drag and drop Sorting Problem in jQueryUI. I hope you will like it.