Question

So I have created an draggable div, that I want to be on top the other divs when dragging around it on the content.

I have tried style.zindex=1 but it don’t seem to solve the problem, If I do it with Jquery there is no problem, but I want to solve it by JavaScript.

Any tips ?

This is what i have come up with.

  function changeClass() {
            var diceClass = document.getElementsByClassName("window");
            for(var i = 0; i<diceClass.length; i++){
                var z = 10;
                diceClass[i].style.zIndex=z++;
            console.log(diceClass)
            } 
        } 
        changeClass()

And my Css

.window
{

    width               : 342px;
    height              : 182px;
    top                 : 0px;
    left                : 0px;
    position            : absolute;
    background          : url(window.png) no-repeat;

    -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   user-select: none;
   cursor: default;

    }

I created an jsFiddle.
The code is on row 31 – 42

http://jsfiddle.net/dymond/tQdFZ/1/

Answer 1

Here’s a fixed jsfiddle.

You were adjusting the z indexes with a ‘click’ event. Click events don’t fire until it receives both a mousedown and mouseup event. This means the z indexes weren’t actually being applied until after you stopped dragging.

Since you’re already handling the mousedown event with startDrag, you can use a closure variable to keep track of the current highest z index and just increment it as you go.

var draggable = document.getElementsByClassName('draggable'),
    draggableCount = draggable.length,
    i, currZ = 1;


function startDrag(evt) {

    var diffX = evt.clientX - this.offsetLeft,
        diffY = evt.clientY - this.offsetTop,
        that = this;

    this.style.zIndex = currZ++;

    ...
}