1

そこで、ドラッグ可能な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/

4

2 に答える 2

1

zforループの外側で宣言するつもりだったと思います。

var z = 10;

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

それ以外の場合は、演算子zを使用しても常に10になります。++

于 2013-02-13T02:08:27.063 に答える
1

これが修正された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++;

    ...
}
于 2013-02-13T02:53:45.040 に答える