Главная -> Статьи о HTML5 -> Использование drag and drop в html 5

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

Конечно, возможность Drag and Drop уже давно была реализована средствами разных JavaScript API, однако в html 5 реализация этой функции выполнена гораздо проще и не требует никаких дополнительных библиотек.

Реализация Drag and Drop в HTML 5 основана на разработках Microsoft и поддерживается в Internet Explorer с 5й версии! На данный момент эта функция так же работает в современных браузерах Firefox, Opera, Safari и Google Chrome.

В этой статье мы попытаемся рассказать Вам как нужно правильно использовать Drag and Drop в html 5.

Введение

Для осуществления функций DnD, вам понадобятся следующие элементы:

  • Объект который будет перетаскиваться
  • Объект, который принимает перетаскиваемый объект
  • Обработчик JavaScript события, которое будет вызываться когда перетаскиваемый объект перемещается на принимаемый объект

Элементы img и a (в случае если указан атрибут href) по умолчанию можно перетаскивать. Если Вам требуется сделать перетаскиваемым любой другой элемент, в нем нужно указать атрибут draggable в true.

Давайте рассмотрим простой пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>

#dropTarget {
 width: 530px;
 height: 200px;
 border: 3px dotted black;
 }

</style>
</head>
<body>
 <img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" />
 <img src="http://html5blog.ru/news/images/HTML5_Connectivity_64.png" alt="HTML5 Connectivity" />
 <img src="http://html5blog.ru/news/images/HTML5_Device_Access_64.png" alt="HTML5 Device Access" />
 <img src="http://html5blog.ru/news/images/HTML5_Multimedia_64.png" alt="HTML5 Multimedia" />
 <img src="http://html5blog.ru/news/images/HTML5_Offline_Storage_64.png" alt="HTML5 Offline Storage" />
 <img src="http://html5blog.ru/news/images/HTML5_Performance_64.png" alt="HTML5 Performance" />
 <img src="http://html5blog.ru/news/images/HTML5_Semantics_64.png" alt="HTML5 Semantics" />
 <img src="http://html5blog.ru/news/images/HTML5_Styling_64.png" alt="HTML5 Styling" />
 <div id="dropTarget"></div>
</body>
</html>

В данном примере Вы можете перетаскивать объекты, однако они не могут быть приняты в divе с id=dropTarget. Чтобы исправить эту ситуацию, мы должны выполнить два условия:

  • Сказать браузеру что перетаскиваемый объект может быть принят принимаемым объектом.
  • Обработать событие помещения перетаскиваемого элемента в принимаемый.

Чтобы выполнить первый пункт, нам нужно обработать событие dragover и dragenter. Если бы не Internet Explorer, обрабатывать пришлось бы только dragover. Вот простой пример кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Пример Drag and Drop в HTML 5</title>
<style>

#dropTarget {
 width: 530px;
 height: 200px;
 border: 3px dotted black;
 }

</style>
<script>

function onDrop(event){
 if (event.preventDefault) {
  event.preventDefault();
  }
 alert('Получено изображение');
 return false;
 }

function cancel(event){
 if (event.preventDefault){
  event.preventDefault();
  }
 return false;
 }

</script>
</head>
<body>
 <img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" />
...
 <img src="http://html5blog.ru/news/images/HTML5_Styling_64.png" alt="HTML5 Styling" />
 <div id="dropTarget" ondrop="onDrop(event)" ondragenter="cancel(event)" ondragover="cancel(event)" ></div>
</body>
</html>

Давайте разберем некоторые моменты в предыдущем примере. Во-первых, конструкция в обработчиках событий ondragenter и ondragover говорит браузеру, что объект, над которым перетаскивается перетаскиваемый объект готов принять его. Чтобы это работало во всех браузерах, нужно оставить конструкцию так как она есть сейчас. (Т.е. в конце обязательно должно быть написано return false). Во-вторых, в обработчике события ondrop мы говорим браузеру что перетаскиваемый объект принят.

Передача данных

Давайте теперь рассмотрим каким образом передать какие-либо данные из перетаскиваемого объекта в принимающий. Для этого нам нужно обработать еще одно событие - ondragstart. Оно вызывается в перетаскиваемом объекте в тот момент, когда пользователь начинает перетаскивание элемента.

<img src="http://html5blog.ru/news/images/HTML5_3D_Effects_64.png" alt="HTML5 3D Effects" ondragstart="onDrag(this, event)" />

Обработчик события будет выглядеть примерно так:

function onDrag(target, event){
 event.dataTransfer.setData('image_name', target.alt);
 event.dataTransfer.setData('draggable_id', target.id);
 }
Здесь мы добавляем в переменную event данные об альтернативном тексте картинки и о её id.

Чтобы считать эти данные, в обработчике события ondrop достаточно написать вот такую конструкцию:

alert(event.dataTransfer.getData('image_name'));

Если Вы всё сделали верно, то теперь когда перетаскиваемый объект попадает на получаемый объект то высвечивается окошко с альтернативным текстом картинки.

То что у нас получилось можно увидеть по этому адресу: http://html5blog.ru/examples/drag-and-drop.html

Добавление пиктограммы перетаскивания

В HTML 5 есть возможность изменить пиктограмму, которая появляется при перетаскивании объекта. Это делается с помощью функции setDragImage(element, x, y). Сначала нам нужно создать сам элемент img:

var dragIcon = document.createElement('img');
dragIcon.src = 'http://twivatar.org/twitter/mini';

После этого в обработчике события ondragstart написать вот такой код:

event.dataTransfer.setDragImage(dragIcon, -10, -10);

Если все сделано верно, то при перетаскивании объекта над ним будет появляться пиктограмма твиттера.

Мы разобрали простейшие принципы работы с Drag and Drop в HTML 5. Надеемся что эта статья принесет кому-то пользу.