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?
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.
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.
In HTML, any element can be dragged and dropped.
All you need to do is use draggable({stack: "div"})
Now when you drag a div it will automatically come to the top.
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.
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With