1

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/

4

2 回答 2

1

这是一个固定的jsfiddle。

您正在使用“点击”事件调整 z 索引。Click 事件在接收到 mousedown 和 mouseup 事件之前不会触发。这意味着在您停止拖动之前实际上并未应用 z 索引。

由于您已经使用 startDrag 处理了 mousedown 事件，因此您可以使用闭包变量来跟踪当前最高的 z 索引，并随时增加它。

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++;

    ...
}
于 2013-02-13T02:53:45.040 回答
1

我认为您的意思是z在 for 循环之外声明。

var z = 10;

for(var i = 0; i< diceClass.length; i++) { ... }

否则即使有运营商z也将永远是十。++

于 2013-02-13T02:08:27.063 回答