Draggable & Drag and Drop items

jQuery UI - Draggable

This example uses the jQuery UI plugin. I pared it down to just the UI core and draggable components, so it weighs in at 27k. In the past, I've found the UI to be pretty inconsistent between browsers to the point where it's unusable, but some parts of it work well enough to use. Newer versions might not have these problems.


By default, the dragged items don't bring themselves to the front, so I added the following options:

highestObject = 500

$('#stage img').draggable({
    containment: 'parent',
    start: function() {
        $(this).css('z-index', highestObject)


That will increment the z-index and assign it to the thing you started dragging. That way, whatever you're dragging always has the highest z-index. I'd like to see this (or something similar/better) added into the plugin in the future.