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
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

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
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

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!