Drag and Drop на примере изменения порядка элементов списка

Перемещение элементов веб-страницы широкого распространено в современных пользовательских интерфейсах. Эта возможность реализуется с помощью интерфейса HTML Drag and Drop. Изменение расположения объекта на странице происходит в три действия: захватить (drag) мышью (тачпадом или сенсорным экраном), переместить в заданную область и сбросить (drop) элемент. Обрабатывая с помощью JavaScript события Drag and Drop, можно создавать различные эффекты перетаскивания. В этой статье мы рассмотрим возможности Drag and Drop на интерактивном примере — перемещение элементов списка.

Описание примера Drag and Drop

Наш пример будет собой представлять простой стилизованный список элементов. С помощью механизма Drag and Drop мы будем менять расположение этих элементов в списке. Реализовывать функционал перетаскивания будем с помощью обработки следующий JavaScript событий:

• dragstart — начало перемещения;
• dragover — перетаскиваемый элемент находится над допустимой областью, куда может быть сброшен;
• dragleave — перемещаемый элемент покидает допустимую для сбрасывания область;
• drop — сброс элемента в целевую область.

Чтобы добавить элементам списка возможность быть перемещаемыми, зададим каждому из них атрибут draggable со значением true.

Начнем разработку с верстки списка.

Верстка списка

HTML-разметка примера будет представлять собой список ul li с названиями языков программирования. Каждый элемент списка будет содержать атрибут draggable. Также установим необходимые классы для стилизации и идентификатор списка для взаимодействия с JavaScript:

<ul class="demoDragDrop" id="demoDragDrop">
    <li class="demoDragDrop__item" draggable="true">PHP</li>
    <li class="demoDragDrop__item" draggable="true">JavaScript</li>
    <li class="demoDragDrop__item" draggable="true">Python</li>
    <li class="demoDragDrop__item" draggable="true">Go</li>
    <li class="demoDragDrop__item" draggable="true">C++</li>
</ul>

Добавим немного CSS-стилей. Класс move будем добавлять/удалять с помощью JS для эффекта наведения при перетаскивании элементов:

.demoDragDrop {
    list-style: none;
    padding: 0;
}

.demoDragDrop__item {
    color: #000;
    padding: 6px 8px;
    margin: 2px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    cursor: move;
    transition: all .3s linear;
}

.demoDragDrop__item.move {
    background-color: #ccc;
}

Сверстанный список будет выглядеть следующим образом:

Далее с помощью JavaScript создадим механизм Drag and Drop.

Drag and Drop на нативном JavaScript

JavaScript-код для создания эффекта перетаскивания будет выглядеть так:

// Запоминаем перемещаемый элемент
let draggedElement = null;

// Обработчик события начала перетаскивания
function handleDragStart(e) {
    draggedElement = this;
    e.dataTransfer.effectAllowed = 'move'; // Задаем разрешенный тип перетаскивания (переместить элемент)
    e.dataTransfer.setData('text/html', this.innerHTML); // Сохраним перетаскиваемый элемент в объект dataTransfer
}

// Обработчик события нахождения элемента надо допустимой для сбрасывания областью
function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Удаляем поведение по умолчанию, позволяет сбросить элемент
    }
    e.dataTransfer.dropEffect = 'move'; // Задаем тип перетаскивания (элемент перемещен на новое место)
    this.classList.add('move'); // Добавим класс move элементу, на который наведен курсор, для эффекта затемнения

    return false;
}

// Обработчик события перемещения за пределы допустимой для сбрасывания области
function handleDragLeave(e) {
    this.classList.remove('move'); // Когда перемещаем элемент за пределы другого элемента, последнему убираем затемнения фона, удаляя класс move
}

// Обработчик события сбрасывания элемента
function handleDrop(e) {
    if (draggedElement != this) { // Не сбрасываем элемент, если курсор находится на нем же
        // Меняем местами HTML-код текущего и перемещаемого элемента
        draggedElement.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }
    this.classList.remove('move'); // После завершения удаляем эффект затемнения

    return false;
}

// Получаем все элементы и устанавливаем на них обработчики событий
const  items = document.querySelectorAll('#demoDragDrop > li');
items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
});

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

Заключение

В статье вы узнали, что такое Drag and Drop и для чего нужна эта технология. На простом примере мы рассмотрели, как с помощью этого механизма можно реализовать перетаскивание элементов списка. Подобный вариант можно использовать, например, для изменения порядка задач в списке дел. Также есть другие известные способы применения этой технологии: перетаскивание файлов в область загрузки на сайте, добавление изображений к постам в социальных сетях или в редакторы контента и другие.