У меня есть несколько перетаскиваемых объектов, которые накладываются как стопка бумаг. Я хочу, чтобы каждый объект лежал на вершине стека при поднятии. Я пытался, но почему-то это не работает должным образом.
Самое близкое, что я получил, было то, что каждый раз, когда я нажимал на один объект, мне нужно было нажимать 1 дополнительное время для следующего элемента, пока он не достигнет передней части. Я думаю, это легко исправить, но я не могу найти его.
Заранее спасибо.
dragElement(document.getElementById("drags"));
dragElement(document.getElementById("drags1"));
dragElement(document.getElementById("drags2"));
dragElement(document.getElementById("drags3"));
dragElement(document.getElementById("drags4"));
dragElement(document.getElementById("drags5"));
dragElement(document.getElementById("drags6"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var z_Index = 1;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
elmnt.style.zIndex = z_Index;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
z_Index++;
}
}
#drags, #drags1, #drags2, #drags3, #drags4 {
position: absolute;
width: 50px;
height: 50px;
}
#drags{
background-color: red;
left:34%;
top:12%;
}
#drags1{
background-color: blue;
left:61%;
top:14%;
}
#drags2{
background-color: green;
left:22%;
top:18%;
}
#drags3{
background-color: yellow;
left:35%;
top:29%;
}
#drags4{
background-color: black;
left:40%;
top:20%;
}
<body>
<div id="drags"></div>
<div id="drags1"></div>
<div id="drags2"></div>
<div id="drags3"></div>
<div id="drags4"></div>
<div id="see-also">Footer</div>
</body>