Drag and Drop

Атрибут:

draggable


События:
dragstart - событие  начала перетаскивания объекта.
drag - перемещение объекта
dragenter - событие вызывается когда перетаскиваемый объект попадает на объект-приемник

dragleave - перетаскиваемый объект покидает объект-приемник

dragover - событие вызывается во время перемещения перетаскиваемого объекта над объектом-приемником.
drop - событие вызывается когда перемещаемый объект попадает на объект приемник и пользователь отпускает кнопку мыши.
dragend - пользователь перестает перетаскивать объект

Объект
dataTransfer - хранит данные при перетаспкивании

Методы:

dataTransfer.setData(format, data) устанавливает mimetype и данные
dataTransfer.getData(format) возвращает данные

dataTransfer.effectAllowed возвращает разрешенные операции над элементом (e.target). Возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialize

dataTransfer.dropEffect возвращает вид операции, которая в настоящее время выбрана. Возможные значения: none, copy, link, move

ataTransfer.setDragImage(img element, x, y) - вместо полупрозрачной картинпки перетаскивается заданное изображение. 
dataTransfer.files - используется для перетаскивания файлов
dataTransfer.addElement(in Element element)

Пример ( chrome)

 

 

    




1

2

3

4

5

6

7