Skip to main content

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

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

Из всех технологий, которые нужно освоить веб-разработчикам, кажется, что та, которая вызывает наибольшую путаницу и потенциальные проблемы, — это 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. Но когда... Читать далее

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

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

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

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

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

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

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

С появлением HTML спецификации Media Capture стало возможным получать медиаданные с камеры пользователя так же,... Читать далее

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

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

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

*

code