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

Incredible Demos

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...


  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!