(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Drag&Drop в HTML 5

Источник: habrahabr

Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.

Поддержка браузерами

На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com.

События Drag&Drop

Ниже перечислены события Drag&Drop, с помощью которых можно контролировать процесс перетаскивания:

  • dragStart: пользователь начинает перетаскивание элемента.
  • dragEnter: перетаскиваемый элемент достигает конечного элемента.
  • dragOver: курсор мыши наведен на элемент при перетаскивании.
  • dragLeave: курсор мыши покидает пределы перетаскиваемого элемента.
  • drag: курсор двигается при перетаскивании.
  • drop: происходит drop элемента.
  • dragEnd: пользователь отпускает курсор мыши в процессе перетаскивания.

Объект dataTransfer

Здесь происходит сам процесс перетаскивания. Наиболее важные параметры:

  • dataTransfer.effectAllowed=value: возвращает тип доступного действия - none, copy, copyLink, copyMove, link, linkMove, move, all или uninitialized.
  • dataTransfer.setData(format, data): добавляет данные в нужном формате.
  • dataTransfer.clearData( format ): убирает данные.
  • dataTransfer.setDragImage(element, x, y): устанавливает изображение для перетаскивания с координатами курсора (0, 0 - левый верхний угол).
  • data = dataTransfer.getData(format): возвращает данные.

Пример Drag&Drop

Теперь рассмотрим наглядный простой пример использования Drag&Drop, где два маленьких синих div'а можно переместить в большой красный, а также вернуть их на исходное место.

Начало перетаскивания объекта

В первую очередь необходимо создать HTML-разметку блоков, добавив атрибут draggable:

<div id="boxA" draggable="true"></div>
Затем определить JavaScript-функцию начала процесса:

function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100); return true; }
В первой строке задан возможный тип перетаскивания - move, во второй - устанавливаются данные процесса - тип (Text) и ID. В третьей строке setDragImage определяет положение курсора, в данном случае в середине квадрата 200х200 пикселей.

Завершение перетаскивания объекта

Потребуется задать три события: dragEnter, dragOver и drop:

<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
Кроме того, требуется добавить JavaScript-функции для завершения процесса перетаскивания - определить, что должно случиться с элементами, когда курсор будет отпущен:

function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { event.preventDefault(); }

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

function dragDrop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; }
Как видно из примера, синие блоки после перетаскивания можно вернуть на исходное место. К счастью, сделать это очень просто. Все функции объявлены, осталось добавить следующий код:

<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

Заключение

С помощью JavaScript-библиотек создано большое количество решений для Drag&Drop, и зачастую они проще в использовании, чем описанный пример. Однако скорее всего в будущем все чаще будет использоваться связка HTML5 & JavaScript.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 13.08.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
ABBYY Lingvo x6 Многоязычная Профессиональная версия, электронный ключ
Panda Gold Protection - ESD версия - на 1 устройство - (лицензия на 1 год)
Quest Software. TOAD Xpert Edition
Купить WinRAR : 5 : Академическая лицензия 1 лицензия
SmartBear QAComplete Concurrent User Subscription License - On Premise (1 Year Subscription)
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Один день системного администратора
Windows и Office: новости и советы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100