Just recently I have been whipping up a UI with drag and drop. Windows forms and WPF are sort of a pain for a simple drag and drop scenario. Then add in a sortable UI ability and it makes me cry hurt. So, in comes in JQuery UI. This library rocks, and let me show you why!
So, first question: How do I make these things dragable? Here is how:
$('.dragableItem').draggable();
Super easy, just select your element and call draggable. Also, make sure to include the jquery library. Now along with draggable, why not add dropable? Like so:
$('.droppable').droppable( { activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { alert('Dropped here.'); } } );
Awesome, just got drag and drop in a few pieces of code.
Ok, now lastly, let’s throw together some sortable stuff:
$('.sortable').sortable({items:'li'}); - task 1
- task 2
- task 3
- task 4
Bam, we got some advanced UI features, and done in less than 10 lines of code. Try it out!