1

Тема: html5 drag and drop

Drag and Drop - одна з нових функцій в html5, який перебуває в стані розробки, тому не всі браузери підтримують даний функціонал. Почитати про те як можна перетягувати елементи без html5 можна в статті "Dragdealer JS: прокрутка та перетягування". При написанні даного уроку, використовувався браузер Google Chrome.


Атрибути:
В html5 додано новий атрибут draggable, який приймає true або false - можна перетягувати та не можна перетягувати елементи відповідно. Трохи поексперементувавши, було виявлено, що за замовчуванням в деяких браузерах <img>, <a> є draggable.
Приклад: http://replace.org.ua/files/articles/ht … rop-1.html
Як видно блокові елементи теж можуть стати draggable при додаванні відповідного атрибуту. Слід також відзначити, якщо вказати атрибут draggable, то не можна виділити текст елементу. Для текстових елементів відбувається щось не зрозуміле: дуже часто переміщується весь текст блоку, а не окремого елементу.

Обробка подій:
В html5 для слідкування за перетягуванням додано нові атрибути, події мишки (events):
- ondrag - спрацьовує, коли елемент перетягується
- ondragend - спрацьовує, коли елемент закінчив перетягуватись
- ondragenter - спрацьовує, коли елемент входить в допустиму для кидання зону
- ondragleave - спрацьовує, коли елемент покидає допустуму для кидання зону
- ondragover - спрацьовує, коли користувач відпускає елемент в допустимій для цього зоні
- ondragstart - спрацьовує, коли користувач тільки почав перетягувати
- ondrop - спрацьовує, коли елемент, що перетягується був кинутий в інший елемент для якого і вказується цей атрибут.

Приклад drag and drop:
http://replace.org.ua/files/articles/ht … rop-2.html
Для елементу, який перетягується вказано draggable="true" та закріплену на подію перетягування функцію drag, яка записує в dataTransfer id даного елементу.
Для елементів, які слугують контейнерами на ondragover спрацьовує функція allowDrop, яка дозволяє кидання на даний об'єкт, шляхом відміни стандартної поведінки, а також на ondrop спрацьовує функція drop, яка бере id елементу з dataTransfer та вставляє його всередину.

Інші приклади:
http://html5demos.com/drag
http://html5demos.com/drag-anything

Подякували: BluSky, Voron2

2

Re: html5 drag and drop

Цікаво..тре буде ознайомитися детально

3

Re: html5 drag and drop

Приклад реалізації Drag and Drop - http://www.w3schools.com/html5/tryit.as … raganddrop
розписано як це реалізувати - http://www.w3schools.com/html5/html5_draganddrop.asp