Подробное объяснение события перетаскивания в HTML5 (перетаскивание)

Internet Explorer 9, Firefox, Opera 12, Chrome и Safari 5 поддерживает перетаскивание.

 <! Javascript> allowdrop (ev) {ev.preventdefault ();} функция Drag (ev) {ev.datatransfer.setData (text, ev.target.id); Ev.datatransfer.getdata (text); = Drop (Event) ondragover = alluctdrop (event)> div> <br/> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png draggable = true ondragstart = draggeoe/logo.png draggable = true ondragstart = drag (Событие)/> </body> </html>

Прежде всего, чтобы элемент был перетаскиван, установите свойство Draggable на True:

Затем указывается, что происходит, когда элемент перетаскивается.

В приведенном выше примере свойство OnDragStart вызывает функцию, перетаскивание (событие), которое определяет перетаскиваемые данные.

DataTransfer.setData () Метод установил тип данных и значение данных перетаскивания данных:

 Функция перетаскивания (ev) {ev.datatransfer.setData (text, ev.target.id);}

В этом примере тип данных является текстом, а значение - ID (Drag1), который может перетаскивать элемент.

Событие Ondragover предусматривает, где разместить перетаскиваемые данные.

По умолчанию данные/элементы не могут быть размещены в других элементах. Если вам нужно установить допустимое размещение, мы должны предотвратить обработку элементов по умолчанию.

Это должно вызвать метод события.

 Event.preventDefault ()

Когда данные перетаскивают, происходит событие Drop.

В приведенном выше примере атрибут Ondrop вызывает функцию, Drop (Event):

 Функция Drop (ev) {ev.preventDefault ();

Позвоните в предотвращение defousddefault (), чтобы избежать обработки данных по умолчанию в браузере (поведение события Drop по умолчанию открывается по ссылке)

Получить перетаскиваемые данные через метод datatransfer.getData (текст). Этот метод вернется к любым данным того же типа в методе setData ().

Данные перетаскивания - это идентификатор элемента перетаскивания (Drag1)

Дополнительный элемент перетаскивания в элемент размещения (целевой элемент)

Приведенное выше содержимое этой статьи.