Чтобы разобраться с перетаскиванием html5, а также с порядком других событий мониторинга и их выполнения, требуется 5 минут.
Определение и использованиеВо время процесса перетаскивания будут вызваны следующие события:
Запустите событие на цели перетаскивания (исходный элемент):
События, срабатывающие при отпускании цели:
Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают перетаскивание.
Примечание. Safari 5.1.2 не поддерживает перетаскивание; при перетаскивании элемента событие ondragover запускается каждые 350 миллисекунд.
Примеры следующие:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Краткий пример перетаскивания за 5 минут</title> <style> #draggable { width: 200px height: 20px; выравнивание текста: по центру; фон: белый; } .dropzone { ширина: 200 пикселей; фон: сине-фиолетовый; отступ: 10 пикселей; </style> <script> var перетаскивается; .addEventListener(dragstart, function (event) { console.log('==========dragstart Начало перетаскивания=========Перетаскивание выполняется только один раз'); // Сохраняем ссылку на перетаскиваемый элемент (ref.) dragged = event.target; // Делаем его полупрозрачным event.target . style.opacity = .5; }, false); /* Событие перетаскивания срабатывает при перетаскивании целевого элемента*/ document.addEventListener(drag, function (event) { // console.log('=========drag==========Перетаскивание будет продолжать отслеживаться до тех пор, пока элемент не будет удален'); /* При размещении цели; Элемент Триггерные события */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Всегда будет слушать при перетаскивании, Пока элемент не будет удален'); // Запретить действие по умолчанию, чтобы включить отбрасывание event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter перетаскивает элемент в целевой элемент==========соответствует to dragleave '); // Выделяем целевой узел, когда перетаскиваемый элемент входит в зону перетаскивания if (event.target.className == dropzone) { event.target.style.background = Purple } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave перетаскивает элемент от целевого элемента ==========соответствует dragenter') ; // Когда перетаскиваемый элемент покидает удаляемый целевой узел, сбрасываем его фон if (event.target.className == dropzone) { event.target.style.background = ; }, document.addEventListener(drop, function); (событие ) { console.log('=========drop drop element==========Перетаскивание выполняется только один раз, инициируется перед перетаскивателем' // Запретить действия по умолчанию (например, такие как перетаскивание). открытие ссылок на некоторые элементы) event.preventDefault(); // Перемещаем перетаскиваемый элемент в выбранный узел зоны перетаскивания if (event.target.className == dropzone) { event.target.style.background = ; dragged.parentNode .removeChild (тащил); event.target.appendChild(dragged); } }, false); document.addEventListener(dragend, function (event) { console.log('==========dragend завершает перетаскивание====== =====Перетаскивание выполняется только один раз'); //Сброс прозрачности event.target.style.opacity = }, false); </script></head><body> <div class=dropzone> < идентификатор div = перетаскиваемый draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Это элемент DIV, который можно перетаскивать </div> </div> <div class=dropzone></div> <div class= dropzone >/div> <div class=dropzone></div></body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.