Использование 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. Надеемся что эта статья принесет кому-то пользу.
