Перетаскивание - это общая особенность, то есть перетаскивание в другую позицию после объекта захвата. В HTML5 пользователи могут использовать мышь для выбора элемента перетаскивания, перетаскивать элемент в размещенный элемент и поставить кнопку мыши в эти элементы. Во время операции перетаскивания полупрозрачный трансбант, указывающий на то, что указатель мыши может быть перетаскивается.
Если мы надеемся, что элемент можно перетащить, тогда нам нужно установить его свойство перетаскивания в True (TAG DRAGGABLE по умолчанию верно))
Событие перетаскиванияНесколько событий будут запускаются на разных этапах операции перетаскивания, а атрибут Datatransfer инцидента перетаскивания и перетаскивания должен хранить соответствующие данные в операции перетаскивания.
| Dragstart | Активно для [исходного элемента], когда элемент начинает перетаскиваться, пользователь перетаскиваемый элемент требует дополнительного события DragStart. В этом инциденте слушатель настроит информацию, связанную с этим перетаскиванием, такую как перетаскивание данных и изображений. |
| Драгентер | Активно для [исходного элемента], запускает, когда мышь в перетаскивании в элемент. Слушатель этого инцидента должен указать, разрешено ли мышью мышью в этой области. Если слушатель не установлен или слушатель не эксплуатируется, его не разрешается выпускать по умолчанию. |
| драгвер | Активен в [целевой элемент], триггеры, когда мышь перемещалась на сопротивление. |
| драглив | Активен в [целевой элемент], запускает, когда мышь оставляет элемент при перетаскивании. Он может быть использован в качестве основного или вставки, который может быть выпущен. |
| Тащить | Активно для [исходного элемента], событие запускается, когда элемент перетаскивается. |
| уронить | Активируется для [целевого элемента], запускает элемент высвобождения, когда выпуск выпуска операции перетаскивания. |
| Драгнд | Активно для [исходного элемента], источник сопротивления запускается в конце операции перетаскивания, независимо от того, является ли операция успешной. |
(При перетаскивании это только запустит события, связанные с перетаскиванием, события мыши, такие как MouseMove, которые не будут запускаются)
Объект DataTransferПри обработке операции перетаскивания нам необходимо использовать объект DataTransfer для сохранения перетаскиваемых данных. Datatransfer может сохранить один или несколько данных, один или несколько типов данных.
свойство
| Dropeffect | Dropeffect [String] укажите фактический эффект размещения, возможное значение: Копия: копия на новую должность Переместите: перейти на новую позицию Ссылка: Создайте ссылку из источника на новую позицию Нет: запрещено размещать (без операции) |
| EffectLowed | [String] укажите допустимый эффект при перетаскивании, возможные значения: Копия: копия на новую должность. Движение: Перейдите на новую позицию. Ссылка: Создайте ссылку из источника в новое место. Copylink: разрешить копию или ссылку. Copymove: разрешить копию или перемещение. LinkMove: разрешить ссылки или перемещение. Все: разрешить все операции. Нет: запрещено все операции. Неинитированное: значение по умолчанию (значение по умолчанию) эквивалентно всем. |
| Файлы | Содержит список локальных файлов, доступных при передаче данных. Если операция перетаскивания не включает файл перетаскивания, этот атрибут является пустым списком. |
| типы | Сохраните список типов данных хранения в качестве первого элемента, заказ согласуется с порядком добавления данных. Если данные не будут добавлены, будет возвращен пустой список. |
метод
| void AddElement (элемент элемента) | Установите источник перетаскивания. Обычно не нужно менять это. Цель по умолчанию - перетаскивать узлы |
| Void cleardata (тип строки) | Удалить данные, связанные с данным типом. Параметры типа являются необязательными. Если тип пуст или не определен, удалите все типы связанных данных. Если не существует указанного типа данных или передачи данных, не содержит никаких данных, этот метод не будет иметь никакого эффекта. |
| String getData (тип строки) | Получение данного типа данных, если данные данного типа не существует или данные хранятся без содержания данных, метод вернет пустую строку. |
| void setData (тип строки, строковые данные) | Установите данные для данного типа. Если тип данных не существует, он будет добавлен к концу, а последний проект в списке этого типа станет новым форматом. Если вы уже существуете, замените существующие данные в той же позиции. То есть, когда заменяется тот же тип данных, порядок списка типов не будет изменен. |
| void setDragimage (Domelement Image, Long X, Long Y) | Настройте изображение ожидаемого перетаскивания. В большинстве случаев этот элемент не должен быть установлен, потому что перетасный узел создается как изображение по умолчанию. Изображение должно использоваться в качестве элемента изображения обратной связи перетаскивания Горизонтальное смещение на изображении X. Вертикальное смещение в статуе Y. |
Поддержка браузера
Internet Explorer 9+, Firefox, Opera 12, Chrome и Safari 5+
Демонстрационный код
<! ; Solid #ccccff; > </div> <div class = bin> & nbsp; '. e.datatransfer.effectalling = 'Move'; true; Элемент перетаскивания входит в целевой элемент bin.ondragover = function (e) {e.preentdefault (); '; function (e) {if (Drag) {Drag.parentnode.removechild (Drag); Функция (e) {e.preventDefault ();Выше приведено введение информации, связанной с перетаскиванием в HTML5.