jQuery has a UI framework called jQueryUI which provides a number of UI controls and widgets that you can use to create cool user interfaces. I've been using jQueryUI a fair bit for work recently and wanted to share a pretty cool feature that jQueryUI has.
jQueryUI has a widget called a sortable which is just a list of sortable dom elements. It allows you to drag the items around and resort them in a list. Options are passed in an object that you give to the sortable constructor/initializer. You can initialize a sortable like so:
| $('#my-list').sortable({ | |
| axis: 'x' | |
| }); |
In this case the options object and contained "axis" option are optional but it gives you a good idea what a widget initializer looks like.
jQueryUI also has a draggable widget which allows you to easily create draggable items. This draggable can also be connected to a sortable object so you can drag an object onto a sortable widget.
| $('#my-item').draggable({ | |
| connectToSortable: '#my-list' | |
| }); |
jQueryUI also allows you to connect sortables to each other which creates the potential for some interesting user interfaces.
| $('#my-list').sortable({ | |
| connectWith: '#my-other-list' | |
| }); |
You can even connect the sortables together so you can drag items back and forth between the sortables:
| $('#my-list').sortable({ | |
| connectWith: '#my-other-list' | |
| }); | |
| $('#my-other-list').sortable({ | |
| connectWith: '#my-list' | |
| }); |
