From the course: jQuery: UI Widgets

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Making items sortable

Making items sortable - jQuery Tutorial

From the course: jQuery: UI Widgets

Start my 1-month free trial

Making items sortable

jQuery UI is not just about interface widgets. It also includes some interactions that you can use separately from any other widgets. In this movie, we're going to look at the sortable interaction. So, I have this little tiny gallery of thumbnails. And over here, is the markup. I have an unordered list, with an ID on it, and then every list element itselt, has an ID. This is going to be important, for reasons we'll see soon. And then I have my little trigger button, to make everything sortable. And here's the JavaScript. This looks a lot like everything else we've seen in jQuery UI so far. We select an element and then call a method on it. In this case, that method is sortable. So switching over here, I'm going to refresh to make sure I have the freshest copy. And now if I just drag things around, you can see there's no sorting happening. I just kind of grab the image, and this is the operating system taking over the drag. Now if I click my trigger, I can click these images, and they…

Contents