Всем доброго времени суток.
Ситуация следующая...
Имеется 5 слоёв. Пользователь может их перетаскивать в пределах определённой области.
Проблема:
при перемещении слоёв (div) они накладываются друг на друга, согласно z-index, который сохраняется в БД и имеет порядок определяемый пользователем. Как при клике на слое отобразить его поверх других не изменив при этом порядок отображения других слоёв? То есть, если к примеру у нас был следующий порядок:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 3 - индекс 2,
слой 4 - индекс 3,
слой 5 - индекс 4,
то как при клике на слое 3 получить следуещее:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 4 - индекс 2,
слой 5 - индекс 3,
слой 3 - индекс 4 ?
В jave "мёртвый", может в самом языке какая функция есть, типа "тор" или что-то в этом роде? Заранее благодарю всех откликнувшихся.
Как при клике на DIV отобразить его поверх других?
-
skyfish
Re: Как при клике на DIV отобразить его поверх других?
Вам нужен document.getElementById(id).style.zIndex:
Код: Выделить всё
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
topLevel=5 // top z-index
lastID=""
function changeZindex(obj){
id=obj.id
document.getElementById(id).style.zIndex=topLevel
if(lastID==""){
lastID=id
}
if(lastID==id){
document.getElementById(id).style.zIndex=topLevel
}
else{
document.getElementById(lastID).style.zIndex=""
}
lastID=id
}
// -->
</script>
<style type="text/css">
<!--
#d1{position:absolute; left:0px; top:0px; width:100px; height:100px; z-index:1; background-color:green}
#d2{position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:2; background-color:yellow}
#d3{position:absolute; left:40px; top:40px; width:100px; height:100px; z-index:3; background-color:red}
#d4{position:absolute; left:60px; top:60px; width:100px; height:100px; z-index:4; background-color:blue}
-->
</style>
</HEAD>
<BODY>
<center>
<div style="position:relative;width:110px">
<div id="d1" onclick="changeZindex(this)">A</div>
<div id="d2" onclick="changeZindex(this)">B</div>
<div id="d3" onclick="changeZindex(this)">C</div>
<div id="d4" onclick="changeZindex(this)">D</div>
</div>
</center>
</BODY>
</HTML>