Перетаскивание является частью стандарта HTML5.
Поддержка браузера
Internet Explorer 9, Firefox, Opera 12, Chrome и Safari 5 поддерживает перетаскивание.
Элемент перетаскивания, Dragelement:
1. Добавить событие: Ondragstart 2. Добавить атрибуты: перетаскиватьЭлемент разместите, Droplement:
1. Добавить события: Ondargenter, Ondragover, Ondraglave, Ondragend, Ondrop
Это похоже на инциденты Mouser в классификацию, и это хорошо понятно.
1. Перетащите и падение между элементами на странице
Давайте используем небольшой пример ниже, отображается перетаскивание между DIV, как запускается каждое событие:
<! src = ../../jquery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javascript>/*** rag (перетаскивание и падение). Стандартный компонент HTML5. * Браузер поддерживает* Internet Explorer 9, Firefox, Opera 12, Chrome и Safari 5 поддержки. * / $ (fuins () {$ (#drage) [0] .ondragstart = function (event) {console.log (drawstart); event.datatransfer.setData (text, event.target.id);}; /* * * Когда данные перетаскивают, происходит событие Drop. P] + @@);} * / console.log (ondrop); .d (div) .length)); ;} $ (#Dropele) [0] .ONDRAGLEAVE = function (event) {console.log (ondrop veast); Head> <body> <div Style = граница: 1PX Solid Red; : 330px;Вы должны обратить внимание на:
A. Ontragover должен организовать поведение по умолчанию события.
B. Поведение по умолчанию события Drop открывается по ссылке, поэтому оно также необходимо предотвратить поведение по умолчанию.
Также можно заметить, что при перетаскивании и отключении событие содержит объект DATATARANSFER. и скопируйте его.
Вот другие методы объекта:
Event.datatransfer:
items = [Object DataTransFerntemlist] @@ Drag_drop.html: 44
Files = [Object FileList] @@ Drag_drop.html: 44
Types = text/plain @@ drag_drop.html: 44
EffectAlowed = All @@ Drag_drop.html: 44
Dropeffect = none @@ drag_drop.html: 44
clearTata = function recainata () {[Native Code]} @@ drag_drop.html: 44
getData = fuory getData () {[Native Code]} @@ drag_drop.html: 44
setData = function setData () {[Native Code]} @@ Drag_drop.html: 44
setDragimage = function setDragimage () {[Native Code]} @@
Я использовал JS, чтобы распечатать все его атрибуты:
1. GetData, примеры SetData были использованы в приведенном выше примере, ClearData - это очистить данные настроек.
2. Стоит отметить, что файлы.
3. SetDragimage (изображение, x, Y) используется для установки визуализации движения с мышью во время движения мыши. Должен быть установлен в Dragstart.
4. Типы, Effectalling и Droppect - это типы перетаскивания в элемент.
Выше всего содержимое этой статьи.