Drag and Drop Z-Index Stacking
In an example for a previous post, I showed you how to use opacity during a drag'n'drop transaction. One bit I didn't account for was element stacking and bringing the most recent element to the top of the stack. To do so, we'll need to use a variable that represents the highest zIndex, which we'll be incrementing.
The MooTools JavaScript
window.addEvent('domready',function() {
var zIndex = 2;
$$('.draggable').each(function(el) {
var drag = new Drag.Move(el,{
grid: false,
preventDefault: true,
onStart: function() {
el.setStyle('z-index',zIndex++); //increment!
}
});
});
});
As you probably expected, the process is as simple as it gets. Correct stacking order is incredibly important as you don't want items to be wrongly buried.
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![MooTools 1.3 Browser Object]()
MooTools 1.3 was just released and one of the big additions is the Browser object. The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and...
![MooTools, mediaboxAdvanced, and Mexico]()
The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...
I believe z++ should actually be zIndex++ … or you get fail ;)
This Friday’s dumbass mistake brought to you by…lack of sleep.
Nice idea, although it does not seem to work for me (tested in Chrome/Windows).
Either way, I think you should do pre-increment instead of post-increment, to assign the incremented value to the element:
el.setStyle('z-index', ++zIndex). That way you wont need to start the variable in 2 :)Is it just me or did your original referenced topic use
z-indexstacking as well?Have a look at the footer on my homepage. I have incorporated dragging functions with jquery for the 4 items. I had hover z-index replace at one point but removed it because it was not realistic with solid gears :) THX
@Brian Klepper: I meant 6 items.. :0
hi dav, is it possible to write draggable events into a db?