Z索引一個可拖動div的JavaScript只有

所以我創建了一個可拖動的div，我希望在其他內容上拖動它時在其他div上。Z索引一個可拖動div的JavaScript只有

我試過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/

來源

2013-02-13 Dymond

你用一個 '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++; 

    ... 
}

來源

2013-02-13 02:53:45

它的作品幾乎就像一個魅力:) 問題是，該分區將回到原來的Z指數。它不會停留在頂部。 – Dymond 2013-02-13 03:02:01

糟糕，我沒有意識到你想要最後選擇的一個留在上面。我更新了我的答案和jsfiddle。 – 2013-02-13 03:10:41

:)現在它像一個魅力:) 謝謝。 – Dymond 2013-02-13 03:15:07

我想你的意思是聲明z外的for循環。

var z = 10; 

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

否則z永遠是十連與++運營商。

來源

2013-02-13 02:08:27

我已經嘗試過，但仍然沒有改善。該div不會在上面。 – Dymond 2013-02-13 02:11:59

Z索引一個可拖動div的JavaScript只有

回答

相關問題