Fixing The Z Index For Draggables

By default, jQuery UI draggables do nothing with the z-index for draggables. We can fix this with one line.

HTML

<div class="draggable ui-widget-content">
    <p>Drag me around</p>
</div>
<div class="draggable ui-widget-content">
    <p>Drag me around</p>
</div>
<div class="draggable ui-widget-content">
    <p>Drag me around</p>
</div>

CSS

.draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}

JavaScript

$( ".draggable" ).draggable({

    // When the user starts dragging, make sure the z-index for this
    // helper is higher than all other draggables.
    start: function ( e, ui ) {
        $( ".ui-draggable" ).not( ui.helper.css( "z-index", "1" ) )
                            .css( "z-index", "0" );
    }

});