Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting z-index on draggable elements

I am trying to set the z-index on draggable elements using jQuery. You can see what I am talking about and what I have so far here:

http://jsfiddle.net/sushik/LQ4JT/1/

It is very primitive and there are problems with it. Any ideas on how I would make the last clicked element have the highest z-index and rather than resetting all of the rest to a base z-index, have them step, so the 2nd to last clicked has the second highest z-index, etc..

Another problem I am having with it is that it only works on a full click event but the draggable functionality works by clicking and holding down. How could I have the class applied on that initial click down and not wait for the event of releasing the click?

like image 695
Zac Avatar asked Mar 07 '11 08:03

Zac


People also ask

How do I limit a draggable area?

Limit draggable area using 'containment' option It is simple. All you have to do is, add an option called containment to the draggable() method. The containment option has a value parent.

How do you get the position of the draggable element?

The . position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with . offset() , which retrieves the current position relative to the document.

Can any HTML element be draggable?

In HTML, any element can be dragged and dropped.


3 Answers

All you need to do is use draggable({stack: "div"}) Now when you drag a div it will automatically come to the top.

Check working example at http://jsfiddle.net/LQ4JT/8/

like image 62
Hussein Avatar answered Oct 12 '22 04:10

Hussein


I have updated your CSS and Javascript. Don't use "!important" in css unless you are that much desperate.

http://jsfiddle.net/LQ4JT/7/

    $(document).ready(function() {
        var a = 3;
        $('#box1,#box2,#box3,#box4').draggable({
            start: function(event, ui) { $(this).css("z-index", a++); }
        });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});​

Though this answer works it has the limitation of max number of 2^31−1 in javascript. refer What is JavaScript's highest integer value that a Number can go to without losing precision? for more info.

like image 27
Mahesh Avatar answered Oct 12 '22 06:10

Mahesh


The easiest way I found to solve this problem was to use the appendTo and zIndex options.

$('#box1,#box2,#box3,#box4').draggable({
  appendTo: "body",
  zIndex: 10000
});
like image 7
Caedmon Avatar answered Oct 12 '22 04:10

Caedmon