JQuery UI draggable element always on top

Question

I need the items that are being dragged from the left side area to always be on top. And they, when I first drag them from the left area, however, if I drop them into Box 2, and then decide to drag them into Box 1, the item that I dragged will appear under block 1.

Confused? Here is a DEMO about what I'm saying.

Yes, I added zIndex - it did not help.

Answer 1

It looks like you are doing some kind of editing. :)

The solution sets two blocks to the same z-index, and then omits the brother's z-index (the field in which the card did NOT end) using the "start" event. The stop event should set them equal again. Of course, the drag and drop itself needs a higher z-index.

You can also try the stack .

EDIT: Working example. Note that its actually a drag-and-drop event that should set the z-indexs values ​​again.

You will need to make these changes (of course, leave asterisks in your code):

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;** } 

Answer 2

I do what two7s_clash recommends for my drag and drop when elements are inserted dynamically. We have some elements pasted on top of the canvas, and then we want to drag n onto everything:

 start: function(e) { $('element').css('z-index', -1)} stop: function(e) { $('element').css('z-index', 0)}