Question

所以我创建了一个可拖动的div，当我在内容上拖动它时，我希望在其他div上占据优势。

我已经尝试过style.zindex = 1但它似乎没有解决问题，如果我用Jquery做这个没有问题，但我想用JavaScript解决它。

任何提示？

这就是我想出来的。

  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()

和我的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;

    }

我创建了一个jsFiddle。代码在第31-42行

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

Answer 1

我认为您打算在for循环之外声明z。

var z = 10;

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

否则使用z运算符，++将始终为10。

Answer 2

Here's a fixed jsfiddle.

您正在使用“click”事件调整z索引。在收到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++;

    ...
}

Z使用JavaScript索引一个可拖动的div

2 个答案: