Drag and Drop Z-Index Stacking

By  on  
MooTools Drag Opacity

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.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • By
    Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

Discussion

  1. I believe z++ should actually be zIndex++ … or you get fail ;)

  2. This Friday’s dumbass mistake brought to you by…lack of sleep.

  3. 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 :)

  4. Is it just me or did your original referenced topic use z-index stacking as well?

  5. 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

  6. @Brian Klepper: I meant 6 items.. :0

  7. daniele

    hi dav, is it possible to write draggable events into a db?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!