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.
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![MooTools PulseFade Plugin]()
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
The MooTools JavaScript
Options of the class include:
min: (defaults to .5) the...
![MooTools Typewriter Effect Plugin]()
Last week, I read an article in which the author created a typewriter effect using the jQuery JavaScript framework. I was impressed with the idea and execution of the code so I decided to port the effect to MooTools. After about an hour of coding...
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?