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://panisolokha.com/>https://panisolokha.com/</a> про жіночий світ, виховання дітей, затишок у домі, рецепти, догляд за тваринами та рослинами, сонник, привітання, подорожі. Корисні поради та ідеї для натхнення щодня.

Answer 3

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