javascript - Z 仅使用 JavaScript 索引可拖动的 div

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

Here's a fixed jsfiddle.

您正在使用“点击”事件调整 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++;

    ...
}