HTML5 Drag and Drop API для реализации примера кода для сортировки перетаскивания

HTML5 обеспечивает API прямого перетаскивания, что очень удобно для достижения эффекта перетаскивания. Для достижения различных функций перетаскивания.

Если вы хотите перетаскивать определенный элемент, вы должны установить свойства Draggable Element на True. Элементы IMG и элементы установлены с перетаскиваемыми атрибутами в True, которые можно напрямую перетаскиваться и отбросить.

Инциденты перетаскивания генерируются различными элементами. Элемент перетаскивается и сбрасывается, и он может в конечном итоге достичь элемента, который он хочет разместить на многих элементах. Здесь я временно ссылаюсь на элемент перетаскивания и падения и элемент процесса, а элемент, который я достиг, называется целевым объектом. Разные объекты имеют разные события перетаскивания.

Исходный объект:

1. Dragstart: исходный объект начинает перетаскивать и падать.
2. Перетащите: во время перетаскивания исходного объекта.
3. Dragend: исходный объект перетаскивает и выпадает.

Объект процесса:

1. Dragenter: исходные объекты начинают входить в диапазон процесса.
2. Драгувер: исходный объект перемещается в пределах диапазона процесса.
3. Draglave: Объем объекта источника, покидающего процесс.

Целевой объект:

1. DROP: исходный объект перетаскивается и бросается в целевой объект.

 <div id = source draggable = true> aement </div> <div id = process> b element </div> <div id = target> c element </div> <script> var source = document.getelementbyid '( 'Source'), // element proces = document.getElementbyId ('process'), // b -элемент Target = document.gelementbyId ('target'); События Dragstart генерируются элементом A для генерации console.log ('элемент начинает перетаскиваться');}, false) proces.addeventristener ('dragner', function (ev) {// Событие Dragenter генерируется B Элемент. , False) target.addeventListener ('drop', function (ev) {// Событие Drop генерируется console.log ('a a element для c element');) Document.Ondragover = function (e) {e.preventDefault ( );} </script>

Объект передачи данных Datatransfer представлен во всех событиях перетаскивания -Drop для передачи данных между объектами исходных и целевых объектов. Затем узнайте методы и атрибуты этого объекта, чтобы понять, как он передает данные.

Этот метод хранится в объекте Datatransfer. Получите два параметра, первый указывает на строку для хранения типа данных, и теперь поддерживает следующее:

1. Текст/Plain: текст текста.
2. Текст/HTML: HTML Text.
3. Текст/XML: XML текст.
4. Текст/List: список URL, каждый URL-одна строка.

Второй параметр - это данные, которые будут сохранены. Например:

 event.datatransfer.setData ('text/plain', 'hello world');

Этот метод считывает данные из объекта Datatransfer. Параметр - это тип данных, указанных в SetData. Например:

 event.datatransfer.getData ('text/plain');

Этот метод удаляет данные, хранящиеся в объекте DataTransfer. Параметры являются необязательными для типов данных. Если параметры пусты, очистите все типы данных. Например:

 event.datatransfer.cleardata ();

Этот метод настроен на перетаскивание значков с помощью элементов IMG. Получите три параметра, первым является элемент значка, вторым является смещение оси x элемента значка из указателя мыши, а третьим является смещение оси y из элемента значка из указателя мыши. Например:

 Var source = document.getElementById ('Source'), icon = document.createElement ('img'); 10, -10)}, false)

Эти два атрибута объединены, чтобы установить визуальный эффект перетаскивания.

Стоит отметить, что IE не поддерживает объект Datatransfer. Да, независимо от того, какая версия IE поддерживается.

Использование API -интерфейсов перетаскивания уже знакомо с вышеизложенным. Сначала посмотрим на эту идею:

1. В одном списке каждый элемент может быть перетаскирован и отброшен, а свойство перетаскиваемого для каждого элемента установлено для каждого элемента.
2. Обследование события Dragstart каждого элемента, чтобы отличить стиль исходного объекта.
3. При мониторинге события Dragenter каждого элемента, когда объект Source входит в текущий элемент, объект Source добавляется перед элементом. Таким образом, элементы, стоящие за ним, будут сжаты исходным объектом, достигая эффекта сортировки.
4. Тем не менее, будет обнаружено, что исходный объект не может быть ранжирован до последнего, и может быть только вторым в предпоследней. В настоящее время событие Dragleave контролируется.

Основной код заключается в следующем:

 var source = document.queryselectiverall ('. List'), dragelement = null; ) {dragelement = this;}, false); [i] .AdDeventListener ('DragLeave', function (ev) {if (dragelement! = this) {if (this == this.parentnode.lastelementchildchild || this.parentnod e.lastchild) {this.parentnode.appendchild (dragelement );}}, false)};

Полный кодовый адрес: Drag-Demo

Он в основном совместим в т.е., но, по крайней мере, его можно перетащить и отсортировать, по крайней мере, в IE10.

И в моем простом тесте обнаружено, что когда элементы не будут установлены в т.е., событие Dragleave не будет запускается.

Более важным моментом является iOS и Android, что является совершенно несовместимым. К счастью, в мобильном конце есть плавка, чтобы сделать его идеально совместимым.

Адрес подключаемого модуля: iOS-HTML5-DRAG-DROP-SHIM

Вам нужно только представить плагин -в исходном коде, чтобы перетащить его на мобильном терминале.

 <script> var iosdragdropshim = {enablenerlave: true} </script> <script src = vendor/ios-drop.js> </script>

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