Подробное объяснение встроенной операции перетаскивания HTML5.

Функция перетаскивания H5 использовалась в недавней разработке проекта. Поскольку существующий проект использует корзину семейства VUE, используется плагин vuedragable, но весь процесс довольно болезненный. Поэтому я решил начать изучать принципы перетаскивания H5, а затем применить их к платформе, управляемой данными. Для реализации операций перетаскивания в H5 требуется как минимум два шага: 1) Установите для атрибута перетаскивания элемента объекта, который вы хотите перетащить, значение true (img и a elements позволяют перетаскивание по умолчанию); 2) Написание; и перетаскивание соответствующего кода обработки событий. Для удобства тестирования я сначала использую библиотеку jQuery для выполнения базовой функции перетаскивания.

При перетаскивании перетаскиваемого элемента, удерживая кнопку мыши, он будет срабатывать в следующем порядке:

перетаскивание -> перетаскивание -> перетаскивание

1. перетаскивание: срабатывает, когда нажимается мышь и начинается перетаскивание (срабатывает один раз)
2. перетаскивание: срабатывает при удерживании мыши и перетаскивании (постоянно срабатывает)
3. перетаскивание: срабатывает после отпускания мыши (независимо от того, помещен ли элемент в допустимую или недопустимую цель размещения).

Когда перетаскиваемый элемент перетаскивается в контейнер, он срабатывает в следующем порядке:

драгентер -> перетаскивание -> падение

dragenter: пока элемент перетаскивается в цель перетаскивания, событие перетаскивания будет вызвано.

перетаскивание: за перетаскиванием следует событие перетаскивания, и это событие будет продолжать запускаться, пока перетаскиваемый элемент все еще перемещается в пределах диапазона цели перетаскивания.

перетаскивание: когда элемент вытаскивается из цели размещения, срабатывает перетаскивание.

drop: срабатывает, когда перетаскиваемый элемент помещается на целевой элемент.

От начала перетаскивания элемента до размещения элемента в целевой области он будет срабатывать в следующем порядке:

перетаскивание->перетаскивание->dragenter->dragover->dragleave->drop->dragend

Если мы напрямую добавим атрибут перетаскивания к элементу, его можно будет перетаскивать непосредственно в Chrome и Opera (операция освобождения не требуется (например, стрелка меняется на знак +)), но в Firefox нет ответа.

 <ul class=canDrog> <li draggable=true id=1>Отлично</li> <li draggable=true id=2>Хорошо</li> <li draggable=true id=3>Средне</li> <li draggable=true id=4>Плохо</li> </ul> <script> //Нет кода JS</script>

Чтобы решить эту проблему, необходимо привязать обработчик события перетаскивания к элементу перетаскивания и вызвать в этой функции функцию event.dataTransfer.setData.

 <script> <ul class=canDrog> <li draggable=true id=1>Отлично</li> <li draggable=true id=2>Хорошо</li> <li draggable=true id=3>Средне</li > <li draggable=true id=4>Разница</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Требуется доступ к объекту dataTransfer, используемому для перетаскивания данных event.dataTransfer.setData(Text,'1' });</script>

Выпускаемый логотип может отличаться в зависимости от операционной системы. В Mac Chrome он выглядит как круглый логотип с белым знаком «+».

Решение состоит в том, чтобы привязать событие перетаскивания к контейнеру.

 <ul class=canDrog> <li draggable=true id=1>Отлично</li> <li draggable=true id=2>Хорошо</li> <li draggable=true id=3>Средне</li> <li draggable=true id=4>Разница</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>Раздел/неделя</th> <th>Понедельник</th> <th>Вторник</th> <th>Среда</th> <th>Четверг</th> <th>Пятница</th> </tr> </thead> <tbody > <tr> <td>Раздел 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable= true >< /тд> <тд draggable=true ></td> </tr> <!--здесь опущено--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox должен получить доступ к объекту dataTransfer, используемому для связи перетаскиванием event.dataTransfer.setData(Text,'1'); //google Chrome и Opera необходимо добавить $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>

Если вы отпустите перетаскиваемый элемент при использовании Firefox, браузер по умолчанию откроет новую вкладку, как показано ниже.

Это связано с тем, что браузер выполняет поведение по умолчанию после функции обратного вызова drop. Обычное решение — добавить код, который предотвращает выполнение события по умолчанию и предотвращает всплывание в перехватчике drop контейнера перетаскивания.

 <script> //Освобождаем элемент в текущий элемент $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation() });</script>

Однако если перетаскиваемые элементы перетащить в другие места, проблема открытия новых вкладок все равно возникнет. В этом случае приведенный выше код можно добавить во все контейнеры.

Исходный код: https://github.com/pluslicy/drag

Позже мы изучим библиотеку плагинов vuedraggable и применим ее в среде vue.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.