Question

I need to have elements that are dragged from left-hand side area to be always on top. And they are when I first drag them from left area, however if I drop them into Box 2 and then decide to drag to Box 1, the item I drag appears below Box 1.

Confused? Here’s DEMO of what I’m talking about.

Yes, I have added zIndex — did not help.

Answer 1

Looks like you are doing some editing. 🙂

The solution is set the two boxes to the same z-index, and then lower the z-index of the sibling (the box the card is NOT over) using the “start” event. The “stop” event should set them equal again. Of course the draggable itself needs a higher z-index.

You can also try the stack option.

EDIT: Working example. Note that its actually the draggable drop event that needs to set the z-indexs equal again.

You’ll need to make these changes (omit asterisks in your code, of course):

In dragdrop-client.js

// make the new card draggable
    newCard.draggable({
        zIndex: 2500,
        handle: ".card",
        stack: ".card",
        revert: "invalid",
        start: function() {
            $(this).effect("highlight", {}, 1000);
            $(this).css( "cursor","move" );
                **var $par = $(this).parents('.stack');
                if ($par.length == 1) {
                    console.log('in stack');
                    $par.siblings().css('z-index', '400');
                }**
        },
        stop: function() {
            $(this).css("cursor","default");
                $(".stack").css('z-index', '500');
        }
    });

// make the new stack droppable
    newStack.droppable({
        tolerance: "intersect",
        accept: ".card",
        greedy: true,
        drop: function(event, ui) {
            **$(".stack").css('z-index', '500');**
            card = ui.draggable;
            putCardIntoStack(card,stackId);
        }
    }); 

In dragdrop-client.css

.stack {
    width: 300px;
    border: 1px dashed #ccc;
    background-color: #f5f5f5;
    margin: 10px;
    float:left;
    **z-index:500;**
}