Использование drag and drop на HTML5

16 марта 2020 HTML

Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, — это drag ‘n’ drop (перетаскивание).

Это не новая технология, она существует уже много лет, но многие разработчики все ещё цепляются за старые методы, основанные на jQuery, для создания сложной (иногда медленной и неточной) эмуляции перетаскивания.

Теперь, когда HTML5 включает API-интерфейс перетаскивания, у вас уже есть очень простой способ реализовать drag ‘n’ drop (перетаскивание) без головной боли.

1. Как работает drag and drop

Механику работы drag and drop легко понять. У вас есть объект и цель. Необходимо пользователю позволить нажать на объект и перетащить его к цели, а ваше приложение должно обработать это действие соответствующим образом. Перетаскивать можно все, что угодно: блоки, картинки, ссылки и даже просто текст.

2. Создание шаблона веб-страницы

Для начала создадим самый простой шаблон веб-страницы, в который мы будем добавлять все элементы кода :

3. Определение перетаскиваемого объекта

Вы, вероятно, ожидаете здесь какого-то сложного JavaScript-кода для определения, но на самом деле все просто, достаточно установить атрибут «draggable» для элемента и все, например:

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

4. Определение цели

Цель — это зона, куда можно перетащить ваш объект. Опять же, это довольно просто, вам просто нужно дать цели атрибут CSS ID.

    Текст

5. CSS-код

Добавьте следующий CSS-код внутри тега :

#drop_target{border:3px solid #000; padding:10px; height:100px; width:100px;}
#dragMe{height:50px;width:50px;}

6. JS-функции

Этот шаг просто нужен для того, чтобы убедиться, что ваше приложение знает о существовании объектов и что оно должно взаимодействовать с ними. Вы можете использовать сложный подход, если вам это нужно, и создать серию слушателей событий, но вам не нужно придумывать ничего сложного, чтобы справиться с простым перетаскиванием.

На самом деле нам просто нужно определить две функции, которые будут обрабатывать все перемещения, dragObject и dropObject.

var moved=false;
function dragObject(e){
    e.dataTransfer.effectAllowed="move";
    e.dataTransfer.setData("obj1", e.target.id);
    return false;
}
function dropObject(e){
    if(moved==true){
    return false;
    }
    var received=e.dataTransfer.getData("obj1");
    e.dataTransfer.dropEffect="move";
    e.preventDefault();
    e.stopPropagation();
    e.target.appendChild(document.getElementById(received));
    moved=true;
    return false;
}

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