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: /

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 : /

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 plex features that would require days of work.

Is there any fast solution to this?

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/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/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 plex features that would require days of work.

Is there any fast solution to this?

• javascript
• jquery
• css
• jquery-ui-draggable
• jquery-ui-droppable

• so i want to understand your limitation better.. are you saying you can only change the javascript part? since the solution you provided you adjusted the html.. but then you said that's not acceptable – abbood Commented Feb 20, 2013 at 17:22
• I can adjust anything. What I can't adjust is where the 2 containers are defined (the sequence). – mspir Commented Feb 20, 2013 at 21:33
• Can you give me some more context in your jsfiddle? Ie my solution works below.. It just uses javascript to switch the order of the tags.. Apparently that breaks some of your code.. I would like to see how that breaks your code so that I can figure out a better way not too.. – abbood Commented Feb 21, 2013 at 2:42

4 Answers 4

Use the "appendTo" option of the draggable plugin. It will append the draggable helper to a node of choice while dragging (thus preventing the issue you're seeing):

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

See this link to jsfiddle.

The problem is on z-index of your "clone" helper and drop target. Add this to your draggable to force z-index by custom css for clone element:

start: function (e, ui) {
    $(ui.helper).css({
       "z-index": "9"
    })
},

Check around if your droppable element have z-index.

assuming that you want an answer that doesn't mess with the html structure.. here is a javascript only answer http://jsfiddle/abbood/tXCjH/106/

var draggable = $('.draggable_container');
var parent = draggable.parent();
draggable.remove();
parent.append(draggable);

 $("#draggable1" ).draggable({helper:'clone'});
 $("#draggable2" ).draggable({helper:'clone'});
 $("#draggable3" ).draggable({helper:'clone'});

    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
                document.getElementById('droppable').innerHTML = "test";
                $("#droppable").css('background-image', 'url(' + $(ui.draggable).attr("src") + ')');                    
        }
    });

i basically mimicked what you did from a javascript point of view.. this is assuming that draggable and droppable both of the same parent.

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.