Управление HTML DOM с ванильным JavaScript

Авторизоваться

В этом примере мы создадим сортируемый список, элементы которого можно перетаскивать в него:

<div id="list">
    <div class="draggable">A</div>
    <div class="draggable">B</div>
    <div class="draggable">C</div>
    <div class="draggable">D</div>
    <div class="draggable">E</div>
</div>

Каждый элемент имеет класс `draggable`, указывающий, что пользователь может перетащить его:

.draggable {
    cursor: move;
    user-select: none;
}

Сделать элементы перетаскиваемыми

Используя аналогичный подход, упомянутый в публикации Сделать перетаскиваемый элемент, мы можем превратить каждый элемент в перетаскиваемый элемент:

// The current dragging item
let draggingEle;

// The current position of mouse relative to the dragging element
let x = 0;
let y = 0;

const mouseDownHandler = function(e) {
    const draggingEle = e.target;

    // Calculate the mouse position
    const rect = draggingEle.getBoundingClientRect();
    x = e.pageX - rect.left;
    y = e.pageY - rect.top;

    // Attach the listeners to `document`
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function(e) {
    // Set position for dragging element
    draggingEle.style.position = 'absolute';
    draggingEle.style.top = `${e.pageY - y}px`; 
    draggingEle.style.left = `${e.pageX - x}px`;
};

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

Сделать элементы перетаскиваемыми