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

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

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

<div id="droppable">
    ...
</div>

Мы выделим элемент, когда пользователь перетянет файл поверх него. Например, элемент будет иметь пунктирную границу, которая может быть смоделирована классом CSS:

.dragging {
    border: 4px dashed #ccc;
}

Класс dragging будет добавлен к элементу, когда пользователь перетаскивает файл и перемещает его на элемент:

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

ele.addEventListener('dragenter', function(e) {
    e.preventDefault();
    e.target.classList.add('dragging');
});

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

ele.addEventListener('dragover', function(e) {
    e.preventDefault();
});

ele.addEventListener('dragleave', function(e) {
    e.preventDefault();
    e.target.classList.remove('dragging');
});

ele.addEventListener('drop', function(e) {
    e.preventDefault();
    e.target.classList.remove('dragging');
});

Последнее e.preventDefault(), используется в обработчиках для предотвращения выполнения браузером действия по умолчанию.

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

Войти на сайт

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