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 Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![Introducing MooTools ScrollSpy]()
I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...
![Making the Firefox Logo from HTML]()
When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt.
That had to change.
The basic...
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?