Кстати,
интересно что в ранних версиях HTML, этой логики не было. Функциональность Drag & Drop в HTML5 сейчас может использоваться для создания диаграм, управления
файлами и любой другой логики которая может использовать Drag
& Drop. В HTML5 нативная поддержка Drag & Drop не ограничена событиями мыши, но также и более тесно интегрирована
в управление файлами на стороне разработчика. Drag
& Drop
работает по разному в HTML5.
Имеется
много недостатков и недочетов в использовании этой функциональности в других областях.
Самый главный недостаток - это то, что специальный Drag & Drop
не может быть использован совместно с другим содержимым на той же странице пока
обе команды находятся в вашем коде. Это случайное смешивание может привести к
поломке страницы. Другим значимым недостатком специального Drag
& Drop является то, что пользователь не может использовать эту же логику
для десктопа и это не будет работать в Windows. В HTML5
о каждой из этих проблем думали и подготовили API для Drag
& Drop лишенный описанных проблем
и также для ускорения приложений. Логика Drag & Drop в HTML5 основана на Java API и MFC. Hfphf, Разработчики, которые работали с данными API смогут быстро понять особенности данной логики в HTML5.
Draggable=’true’
Перетягивание в HTML5
может быть реализовано с помощью вот таких нехитрых шагов. Аттрибут описанный
выше позволяет перетягивать требуемое содержимое. В HTML все что угодно может
быть перетягиваемым, включая изображения и файлы. Аттрибут для перетягивания
изображения будет выглядеть вот так:
Когда
мы делаем изображение или ссылку перетягиваемой, то мы должны поместить его URL в код, для разрешения этой логики. Содержимое текста может быть задано
в коде. Но ссылки, изображения по умолчанию могут быть перетягиваемыми в HTML5.
Для того что бы другие элементы сделать такими – следует задать тот же аттрибут
как мы делали это раньше. Но в дополнение к этому нужно добавить обработчик ‘dragstart’. Пример ниже демонстрирует как нужно задавать аттрибуты для
перетягивания.
< div draggable= ”true”ondragstart=“event.dataTransfer.setData(‘text/plain’’, ‘ This is the content that is being dragged”>
This is the content that is being
dragged .
В
данном примере для того что бы элемент стал перетягиваемым используется
аттрибут draggable=’true’. Если вы хотите, что
бы элемент не был перетягиваемым можно true заменить на false. Но так нельзя делать для элментов XUL, потому что без
всяких аттрибутов такие элементы будут перетягиваемыми.
<button label = “This is the XUL element”
ondragstart= “event.dataTransfer.setData(‘text/plain’, This is the XUL element
button’);”>
Тип и формат
Существует
две вещи которые нужно указать в начале drag & drop функции – это тип и формат. Популярными типами являются ‘text/plain’ и ‘img/jpg’.
Первый случай используется для перетягивания текстовых элментов. Он
используется практически для всех элементов, только если вы не хотите указать
что то специфическое. После этого следует указать drop событие. Оно
указывает, куда перетягиваемые данные будут помещаться. В событии Drop – обработчик восстановит данные и поместит их туда куда требуется.
SetData
Данный метод предназначен для определения значение и
формата перетягиваемого содержимого. Посмотрите на простой пример показанный
ниже, в котором устанавливаются значение и формат данных.
В случае ссылки, код будет выглядеть следующим
образом.
event.dataTransfer. setData(“text/uri-list”, “ http://www.htmlgoodies.com”)
Перемещение данных
Перемещение
данных – это особенность хранить данные во время перетягивания элемента. Для
этого необходимо провести ассоциирование данных. Разработчик должен осуществить
ассоциирование данных явно при перемещении данных. Например, если перетягивается
только ссылка без контура, ассоциация долны быть выполнена на уровне URL этой ссылки.
Полупрозрачное изображение при перетаскивании
Мы
уже видели что при перетаскивании текста или изображения, появляется такое
полупрозрачное изображение, которые делает выбранные данные прозрачными. Для
того что бы этого добиться – ничего делать не нужно – HTML5 делает это по
умолчанию. Но если вы хотите изменить это поведение, то это изменение должно
быть добавлено в код. Для персонализации изображения используйте setDragImage.
event.dataTransfer.setDragImage(image, xOffset, yOffset)
Эффекты перетаскивания
Перетаскивание
данных само по себе содержит много функций. Можно использовать аттрибут ‘copy’
для опеределения куда должны быть скопированы данные при перетаскивании. Оно
определяет положение в событии Drop. Прочие операции, которые могут быть использованы это ‘move’
и ‘link’. Они определяют что будет перемещено а ‘link’ – показывает соединение
между источником и конечным местом. Все эти функции добавляют эффекты при drag
& drop. ‘effectAllowed’ - используется для задания того, какие эффекты
должны отображатся.
event.dataTransfer.effectAllowed = "link";
В этом примере выбрано
значени ‘link’. Однако можно задать и несколько значений. В таком случае будет
использоваться словосочетание вида ‘copyMove’ ‘moveLink’. ‘All’ может использоваться, если все эффекты должны использоваться.
Место назначения
Для
того что бы определить куда перетаскивать элемент следует эту информацию задать.
На странице есть много мест куда нельзя переместить картинку. Таким образом,
следует указать корректное местоположение. Если вы хотите переместить данные в
неразрешенное место, то для этого следует изменить стандартные настройки,
указав ‘false’ или используя аттрибут event.preventDefault. Код может выглядеть так:
<div ondragover="return false">
<div ondragover="event.preventDefault()">
В
большинстве случаев ‘returnfalse’ используется для перетаскивания данных,
но в отдельных случаях ‘event-preventDefault’ более подходит для
использования.
Эта
публикация дает нам базовое представление логики Drag & Drop поддерживаемой HTML5. Но за этой базовой
простотой скрывается намного болше возможностей чем, тех что бы описаны в
данной статье.
