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

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

16 марта 2020 HTML

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

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

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

<div>
    <img id="dragMe" src="pic.jpg" draggable="true">
</div>

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

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

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

<div id="drop_target">
    Текст
</div>

5. CSS-код

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

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

6. JS-функции

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

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

<script>
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;
}
</script>

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

7. Добавляем вызов функций

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

<img id="dragMe" src="pic.jpg" draggable="true" ondragstart="dragObject(event);">

и

<div id="drop_target" ondragover="event.preventDefault();" ondrop="dropObject(event);">

Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда HTML-файл прост без какой-либо сложной разметки, тогда можно экспортировать HTML-содержимое в формат .doc без особых усилий. Мне даже не нужны сторонние библиотеки. Если вы хотите Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее

Семантические теги HTML5, которые вы должны использовать

Введение спецификации HTML5 принесло с собой множество новых семантических тегов, которые придают ещё больше смысла тегам HTML. Это означает, что теперь веб-разработчикам нужно меньше придумывать и создавать осмысленные типы тегов для построения структуры своего сайта. Основные семантические теги HTML, такие Читать далее

Захват изображения с камеры с помощью HTML5

С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же, как если бы он загрузил на сайт какой-то файл с помощью элемента <input type="file"/>. Media Capture переопределяет поле для отправки файла если к нему добавить Читать далее

Коды специальных символов HTML и символы юникода (unicode)

В статье приведена наиболее полная таблица кодов специальных символов HTML и символы юникода (unicode), которые можно использовать для своих проектов и в социальных сетях. Коды специальных символов HTML Чтобы клавиатура была удобной в использовании, она должна быть достаточно компактной. Однако Читать далее

Добавить комментарий

*

code