jQuery UI draggable element always on top

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.

did you add the z-index to the class/id of the element iself? Cause most likely jQuery UI is adding another class to the element if it's being dragged. Perhaps that's the place where you need to change the z-index. — Joshua - Pendo, Jun 10 '11 at 20:05
Hmm, interesting though. Let me try that, thanks. --- Tried - did not help... — santa, Jun 10 '11 at 20:07
Nevermind, I misunderstood your question. This would only apply to the active element being dragged. Not after dragging. — Joshua - Pendo, Jun 10 '11 at 20:10
Yes, I need it to be applied to active element being dragged. — santa, Jun 10 '11 at 20:10
possible duplicate of [Setting z-index on draggable elements](http://stackoverflow.com/questions/5217311/setting-z-index-on-draggable-elements) — Rick Smith, Jun 18 '15 at 23:19

two7s_clash · Accepted Answer · 2011-06-11T15:01:36.777

9

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

edited Jun 11 '11 at 15:01

answered Jun 10 '11 at 20:49

two7s_clash

5,755
1
27
44

Sorry, I messed up the page -- fixed now. The boxes are created dynamically. I need to have a solution where I don't have to touch anything. What you're saying makes sense but i'm not really sure how to implement it. – santa Jun 10 '11 at 20:53
1

@santa: my solution would be done dynamically. You would need a function to see if the `.card` is a child of `.stack`. If it is, you would lower the sibling `.stack`'s z-index with the 'start' event, etc. I can try and add more exact code later this evening if you can't figure that out. – two7s_clash Jun 10 '11 at 21:19
1

@santa: edited answer to give working example. Let me know how it goes! – two7s_clash Jun 11 '11 at 15:02
Wow! Thanks. One thing that I noticed in the working example is that after I drop the item onto a box, I can no longer drag it onto another box, if I need to. – santa Jun 11 '11 at 16:35
1

@santa: my example fails in ie because I don't have `/incl/pro/dragdrop-server.php` in my example. Its causing your jquery ajax function on line 147 to bomb. Look at my example in firefox or chrome, it works. Try my changes on yours in ie; it will work too. – two7s_clash Jun 11 '11 at 17:06
1

@santa: looks like you took your demo down. Please do give me your check if this helped... – two7s_clash Jun 12 '11 at 20:33
Oh, sorry about that. I was cleaning my db and accidentally deleted this test. I just tried your code and it works great! Thank you so much. – santa Jun 12 '11 at 23:32
@two7s_clash Sorry to bug you again... I've been pulling my hair here. I have no idea what bug I introduced but it is back at not allowing me to drag items from box to box... I know for sure I hit the server file, because I see new records added into db. I checked and it seems I've added your code properly. Just out of ideas.... http://www.c8r.us/uxz3WDH – santa Jun 13 '11 at 21:00
...and I think I have this issue in FF... Seem to work in Opera. – santa Jun 13 '11 at 22:07
1

I had a similar situation. @two7s_clash using your advice I simply {made all draggable's get a z-index of 100, then make $(this) have a z-index of 200} on mousedown. THanks! – chiliNUT Nov 05 '13 at 00:27

score 0 · Answer 2 · edited Dec 03 '13 at 13:57

0

I do what two7s_clash recommends for my drag-drop when elements are inserted dynamically. We have some elements being inserted over a canvas and then we want to drag n drop over everything:

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

edited Dec 03 '13 at 13:57

Ionică Bizău

109,027
88
289
474

answered Feb 14 '13 at 19:54

Rob R

181
1
3
4

jQuery UI draggable element always on top

2 Answers2