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

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

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

<div draggable="true" class="draggable">Drag me</div>

Использование атрибута draggable позволяет браузеру знать, что элемент можно перемещать. По умолчанию браузер покажет элемент - призрак, созданный из исходного элемента при его перетаскивании.

Мы можем настроить элемент-призрак:

// Query the element
const ele = document.getElementById('dragMe');

// The ghost element
let ghostEle;

ele.addEventListener('dragstart', function(e) {
    // Create the ghost element
    ghostEle = document.createElement('div');
    ghostEle.classList.add('dragging');
    ghostEle.innerHTML = 'I am flying';

    // Append it to `body`
    document.body.appendChild(ghostEle);

    // Customize the drag image
    e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

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

ele.addEventListener('dragend', function(e) {
    document.body.removeChild(ghostEle);
});

В приведенном выше примере кода элемент-призрак создается и удаляется на лету. Тем не менее, также возможно использовать существующий элемент:

<div draggable="true" class="draggable">Drag me</div>
<div id="ghost" class="dragging">I am flying</div>

Обработчик событий мало что меняет:

const ghostEle = document.getElementById('ghost');

ele.addEventListener('dragstart', function(e) {
    e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

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

Войти на сайт

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