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.
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![CSS Filters]()
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
![Implement jQuery’s hover() Method in MooTools]()
jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements.
The MooTools JavaScript
We implement hover() which accepts to functions; one will be called on mouseenter and the other...
![Control Element Outline Position with outline-offset]()
I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...
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?