Добрый, не смог разобраться, нужно открыть более двух ДИВ объектов и перемещать их по странице, в отдельности скрипты работают, а вместе нет, как их связать не знаю.
Предоставляю весь код, заранее сори, если грубо написано. Заранее спасибо.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
#elem1{
display:none;
width:100px;
height:100px;
border:1px solid red;
}
#elem2{
display:none;
width:100px;
height:100px;
border:1px solid red;
}
#elem3{
display:none;
width:100px;
height:100px;
border:1px solid red;
}
#elem1.active{
display:block;
width:33px;
height:33px;
position:absolute;
top:10;
background-color:red;
margin:1, 1, 1;
border:1px solid red;
z-index:1;
}
#elem2.active{
display:block;
width:33px;
height:33px;
position:absolute;
top:10;
background-color:yellow;
margin:1, 1, 1;
border:1px solid red;
z-index:2;
}
#elem3.active{
display:block;
width:33px;
height:33px;
position:absolute;
top:10;
background-color:green;
margin:1px, 1, 100;
border:1px solid red;
z-index:3;
}
#b{
position:fixed;
displey:block;
}
button{
display:block;
}
#s{
border:1px solid black;
width:100px;
height:100px;
float:right;
position:relative;
}
.left{
position:fixed;
left:0px;
top:0px;
float:left;
}
</style>
<div id="s">
<div id="elem1" draggable="true"> 1hghgg</div>
<div id="elem2" draggable="true"> 2ghghh</div>
<div id="elem3" draggable="true"> 3ghghgh</div>
</div>
<div id="b" class="left">
<button id="button">отк/закр1</button>
<button id="button1">отк/закр2</button>
<button id="button2">отк/закр3</button>
</div>
[js]
<script>
let button = document.querySelector('#button');
let elem1 = document.querySelector('#elem1');
let button1 = document.querySelector("#button1");
let elem2 = document.querySelector("#elem2");
let button2 = document.querySelector("#button2");
let elem3 = document.querySelector("#elem3");
*!*
let offset1X;
let offset1Y;
button.addEventListener('click', func1);
function func1(){
elem1.classList.toggle("active");
}
elem1.classList.toggle("active");
elem1.addEventListener("dragstart",function(event){
offset1X = event.offset1X;
offset1Y = event.offset1Y;
});
elem1.addEventListener("dragend",function(event){
elem1.style.top = (event.pageY-offset1Y)+"px";
elem1.style.left = (event.pageX-offset1X)+"px";
console.log(event.pageX, event.pageY);
});
*/!*
button1.addEventListener('click', func2);
function func2(){
console.log("999");
elem2.classList.toggle("active");
console.log(777);
}
button2.addEventListener('click', func3);
function func3(){
console.log("999");
elem3.classList.toggle("active");
console.log(777);
}
</script>
</body>
</html>