HTML Element mit der Maus bewegen

Question

Wie kann ich ein HTML Div mit der Maus bewegen wenn ich den Button gedrückt halte so wie wenn ich ein Windows Fenster herumschieben kann?

Comments

https://www.openlearning.com/u/jorgecole-srq16y/about/

---

<a href=http://plitki.com/>plitki.com</a>

---

It is superior to rubber in many <a href=https://mmo5.info/>mmo5.info</a> respects, therefore the products are more durable, reliable and long-lasting in operation.

---

<a href=https://audio-kravec.com/>audio-kravec.com</a>

---

https://files.fm/u/uc5pgzzrbc

Answer 1

Du kannst EventListener für die Events "mouseDown", "mouseUp" und "mouseMove" erstellen und die Position darin entsprechend anpassen. Beispiel auf JSBin.

<div id="beweglichesDiv" style="width:100px;height:100px;background:lightblue;"></div>

<script type="text/javascript">
var isDragging = false;
var offsetX, offsetY;

var beweglichesDiv = document.getElementById('beweglichesDiv');

beweglichesDiv.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.offsetX;
    offsetY = e.offsetY;
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        var x = e.clientX - offsetX;
        var y = e.clientY - offsetY;

        beweglichesDiv.style.transform = `translate(${x}px, ${y}px)`;
    }
});
</script>