JavaScript多个可拖动的DIV窗口，zIndex焦点

我有多个JavaScript可拖动的DIV窗口。点击DIV时，我希望窗口获得最高的Z-index值。我已经通过向焦点元素添加/删除类来制定解决方案，但是，我希望窗口保留其“层”顺序（就好像点击时整个DIV窗口节点重新附加到DOM ）。JavaScript多个可拖动的DIV窗口，zIndex焦点

假设DOM中有五个DIV。 div1，div2，div3，div4和div5。 -div5最接近前面，div1位于后面，依此类推。

当点击div1时，-div1将获得焦点并放在前面，将div5设置回前一步。然后点击div3，-div3最接近前面，div1和div5放回像这样的一步：div2，div4，div5，div1，div3。

来源

2011-12-29 user1121487

如果你想做到这一点，而无需重新追加的元素，我的解决方案时，我写了类似的话而回是跟踪最大z索引。每当窗口提前时，最大z-索引都会增加，并且元素的z-索引将被设置为新值。当然，如果有人用足够的窗户来搅拌，他们可能会得到非常大的z-索引值，所以这并不总是最好的解决方案。

var maximumZIndex = 1; 
var bringForward = function (element) { 
    maximumZIndex += 1; 
    element.style.zIndex = maximumZIndex; 
}

来源

2011-12-29 23:22:47 Treip

这很好。 – user1121487 2012-01-02 14:10:25

如果你不想遍历你所有的div并且不想搞乱z-index，你可以在拖动之前将div再次附加到父元素（body？）。

function stepUpNode(elementDragged){ 
    var parentNode = elementDragged.parentNode; 
    parentNode.appendChild(elementDragged); 
}

来源

2011-12-29 23:13:47 Luca

+1为简单起见。 – 2011-12-29 23:15:16

我试过这个，但是，这似乎删除使用IE浏览器内的div内的点击事件。这也会将div重置为其默认状态（在div中完成的更改，例如滚动或重置）。 – user1121487 2011-12-29 23:19:16

第一个也是最可能的最简单的方法：每次选择一个div时简单地增加最大z-索引。因为（如果我没有记错2147483647）的z-index的值可以变得相当大，你极可能永远不会用完的水平......

下面的代码片段使用一些jQuery的：

var frontmostWindow = null; 
var topZIndex = 10;  

$('div').click(function() { 
    if (this != frontmostWindow) { 
     frontmostWindow = this; 
     topZIndex++; 
     $(this).css('zLevel', topZIndex); 

     // anything else needed to acticate your div 
     // ... 
    } 
});

如果你有限制你可以使用的z-index，每次选择不同的div时，你需要重新分配级别，例如像这样：

// store z-index-ordered divs in an array 
var divs = $('div').toArray().sort(function(a, b) { 
    return parseInt($(a).css('zIndex'), 10) - parseInt($(b).css('zIndex'), 10); 
}); 

// store available z-indices 
var zIndices = []; 
for (var i = 0; i < divs.length; ++i) { 
    zIndices.push($(divs[i]).css('zIndex')); 
} 

// Event listener for clicks 
$('div').click(function() { 
    alert("heyya " + this.id); 
    var element = this; 

    var index = divs.indexOf(element); 
    // check if clicked element is not already the frontmost 
    if (index < divs.length - 1) { 
     // remove div from array and insert again at end 
     divs.splice(index, 1); 
     divs.push(this); 

     // re-assign stored z-indices for new div order 
     for (var i = 0; i < divs.length; ++i) { 
      $(divs[i]).css('zIndex', zIndices[i]); 
     } 

     // anything else needed to acticate your div 
     // ... 
    } 
});

来源

2011-12-29 23:36:21

这很好。我试过第一个例子，但没有jQuery。 – user1121487 2012-01-02 14:10:10

JavaScript多个可拖动的DIV窗口，zIndex焦点

回答

相关问题