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://technolit.shop/>https://technolit.shop/</a> вы сможете выбрать и приобрести функциональные и эргономичные печи в облицовке, сетке, под обкладку. Также в каталоге вы найдете и отопительные печи, облицовки на трубу, порталы и многое другое. Все это выполнено из высокотехнологичных материалов, за счет чего оборудование прослужит долгое время, не утратит технических характеристик, внешнего вида. Регулярное поступление новинок. При разработке продукции используются только инновационные технологии. Установлены разумные цены.

Answer 3

На сайте <a href=https://www.techno-svyaz.ru/>https://www.techno-svyaz.ru/</a> воспользуйтесь возможностью написать российскому производителю печатных плат. Компания находится на рынке уже более 34 лет, потому зарекомендовала себя с положительной стороны. Вежливые менеджеры всегда ответят вам на все вопросы. Уникальностью компании является то, что она постоянно совершенствуется, что позволяет увеличить количество клиентов. В работе используются самые последние, уникальные методы создания материнских плат. Применяются уникальные материалы от проверенных брендов.