Witajcie! Mam problem z kodem JS służącym do przesuwania <div>. Mianowicie chodzi o to, że najzwyczajniej w świecie kod nie działa. Mam pewną teorię dlaczego ale nie wiem jak to naprawić. Chodzi o to, że prawdopodobnie kod JS wykonuje się przed utworzeniem <div> przez co później kod JS nie jest w stanie wykryć tego div'a i nie jest w stanie przypisać mu marginesów. Jeśli się mylę to poprawcie mnie. CSS nie wstawiam, jedyne co dodam to, że ustawiłem position na absolute. Oto kod JS:
function addDiv(){
let div = document.createElement('div');
div.classList.add('blok_test');
div.innerHTML = "<div id='mydivheader'><img class='obrazek' id='blok_polecen' src='blok_polecen.png'></div>";
document.getElementById("sandbox_h").appendChild(div);
}
const el = document.querySelector(".blok_test");
el.addEventListener("mousedown", mousedown);
function mousedown(e){
window.addEventListener("mousemove", mousemove);
window.addEventListener("mouseup", mouseup);
let prevX = e.clientX;
let prevY = e.clientY;
function mousemove(e){
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
const rect = el.getBoundingClientRect();
el.style.left = rect.left - newX + "px";
el.style.top = rect.top - newY + "px";
prevX = e.clientX;
prevY = e.clientY;
}
function mouseup(){
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
}
}
Kod HTML:
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<title>JSBlock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head_container">
<div class="top_options_bar">
<div class="top_options_bar_top">
<div class="dropdown">
<button class="dropbtn">Plik</button>
<div class="dropdown-content">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Edycja</button>
<div class="dropdown-content">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Schematy</button>
<div class="dropdown-content">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Ustawienia</button>
<div class="dropdown-content">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Pomoc</button>
<div class="dropdown-content">
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
</div>
</div>
</div>
</div>
<div class="left_options_bar">
</div>
<div class="sandbox" id="sandbox_h">
<button class="onclick" onclick="addDiv()">Dodaj element</button>
<!--<div class='blok_test'><div id='mydivheader'><img class='obrazek' id='blok_polecen' src='blok_polecen.png'></div></div>-->
</div>
<script type="text/javascript" src="main.js"></script>
</div>
</body>
</html>