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.
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Check All/None Checkboxes Using MooTools]()
There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2.
The XHTML
Note the image with the ucuc ID -- that...
![Introducing MooTools LinkAlert]()
One of my favorite Firefox plugins is called LinkAlert. LinkAlert shows the user an icon when they hover over a special link, like a link to a Microsoft Word DOC or a PDF file. I love that warning because I hate the surprise...
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?