Javascript drag and drop: when draggable object has a fixed or absolute position it disappears behind droppable area

Question

My problem is the following: I would like to drag and drop elements inside another div area. I am using jquery draggable and droppable elements for this particular example. However, when the position of the draggables container is set to fixed or absolute, the draggables disappear behind the droppable container once over is, and for as long as I am dragging. The drop does work normally though.

JS Code:

$(function() {
     $("#draggable1" ).draggable({helper:'clone'});
     $("#draggable2" ).draggable({helper:'clone'});
     $("#draggable3" ).draggable({helper:'clone'});
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                    $("#droppable").css('background-image', 'url(' + $(ui.draggable).attr("src") + ')');                    
            }
        });
 }); 

Html code:

<table cellpadding="0" cellspacing="0" border="0" class="draggable_container">
        <tr>
            <td><img id="draggable1" class="draggable" src="someimage.jpg" width="100" height="100"></td>
            <td><img id="draggable2" class="draggable" src="someimage2.jpg" width="100" height="100"></td>
            <td><img id="draggable3" class="draggable" src="someimage3.jpg" width="100" height="100"></td>
        </tr>
    </table>

<div id="droppable" class="ui-widget-header">
    Drop here
</div>

css:

#draggable_container {
    position:fixed;
}
#droppable {
    width: 400px; 
    height: 300px; 
    padding: 0.5em; 
    margin: 10px; 
    background-size: cover;
    margin-top:100px; 
    margin-left:80px;
    position:absolute;
}

Example here: http://jsfiddle.net/spairus/tXCjH/104/

How can I prevent the draggable elements to dissapear behind the droppable element? I have tried z -indexing but did not work (and after some research it seems not to make any difference in this particular example). The only thing I managed to do that worked is to declare the droppable area before declaring the draggable container, like here : http://jsfiddle.net/spairus/tXCjH/105/

This however is a problem for me right now because the original application I need to edit is an older piece of code with many tables and complex features that would require days of work.

Is there any fast solution to this?

Answer 1

Looks like the only way to make this work without problems is to define the draggables container after the droppables container and then use CSS to position the first before the latter on the page.