CODEWITHSUNDEEP
javascriptjquerycssjquery-ui-draggablejquery-ui-droppable
mspir
mspir

Reputation: 1734

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

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?

Upvotes: 4

Views: 6324

Answers (4)

ed.tmt
ed.tmt

Reputation: 31

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.

Upvotes: 2

mspir
mspir

Reputation: 1734

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.

Upvotes: 0

marty
marty

Reputation: 4015

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.

Upvotes: 4

abbood
abbood

Reputation: 23548

assuming that you want an answer that doesn't mess with the html structure.. here is a javascript only answer http://jsfiddle.net/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.

Upvotes: 1

Related Questions