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?

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>

Answer 2

На сайте <a href=https://womontrue.ru/>https://womontrue.ru/</a> вы найдете огромное количество интересной, познавательной информации, которая пригодится каждой представительнице прекрасного пола. Так вы ознакомитесь с секретами эффективного и полноценного ухода, тем, как выглядеть идеально без макияжа. Есть информация про массаж и его пользу, о том, что не нужно приобретать малышу и что считается бесполезной тратой средств. Есть информация о том, как защитить свою кожу в летнее время. Почитайте информацию о том, как привлекательно выглядеть после 50.