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

Посетите сайт Digital-агентство полного цикла Bewave <a href=https://bewave.ru/>https://bewave.ru/</a> и вы найдете профессиональные услуги по созданию, продвижению и поддержки интернет сайтов и мобильных приложений. Наши кейсы вас впечатлят, от простых задач до самых сложных решений. Ознакомьтесь подробнее на сайте.

Answer 3

Ищете <a href=https://arayas-cheats.com/game/rust>rust cheat</a>? Arayas-cheats.com/game/rust. Играйте, не боясь получить бан. Узнайте детальнее на странице, какие для игры Rust бывают читы и как пользоваться ими правильно, а также получите ответы на популярные вопросы для того, чтобы всех в Раст нагибать.

Answer 4

Посетите сайт <a href=https://allcharge.online/>https://allcharge.online/</a> - это быстрый и надёжный сервис обмена криптовалюты, который дает возможность быстрого и безопасного обмена криптовалют, электронных валют и фиатных средств в любых комбинациях. У нас актуальные курсы, а также действует партнерская программа и cистема скидок. У нас Вы можете обменять: Bitcoin, Monero, USDT, Litecoin, Dash, Ripple, Visa/MasterCard, и многие другие монеты и валюты.

Answer 5

Посетите сайт <a href=https://artradol.com/>https://artradol.com/</a> и вы сможете ознакомиться с Артрадол - это препарат для лечения суставов от производителя. На сайте есть цена и инструкция по применению. Ознакомьтесь со всеми преимуществами данного средства, которое является нестероидным противовоспалительным препаратом для лечения суставов. Помогает бороться с основными заболеваниями суставов.