API перетаскивания — это новая функция HTML5, по сравнению с другими новыми функциями, на которую приходится 60% важности и 30% использования в реальной разработке. Требований к обучению достаточно только для ее освоения.
2. Что такое перетаскивание?Перетащите: Перетащите
Релиз: Падение
Перетаскивание означает, что мышь щелкает по исходному объекту и продолжает перемещать объект, не отпуская его.
3. Что такое исходные и целевые объекты?Исходный объект: относится к объекту, по которому мы щелкаем мышью. Это может быть изображение, DIV, фрагмент текста и т. д.
Целевой объект: относится к тому, когда мы перетаскиваем исходный объект и перемещаем его в область. Исходный объект может войти в эту область, навести курсор на эту область (не отпуская) и отпустить исходный объект здесь (вы уже отпустили). также может покинуть область после зависания.
4. Связанные функции API перетаскиванияПосле объяснения того, что такое исходный объект и целевой объект, давайте вернемся к API перетаскивания во внешнем интерфейсе. Из приведенных выше операций мы можем получить несколько функций.
События, которые могут быть вызваны перетаскиваемым исходным объектом:
(1)ondragstart: исходный объект начинает перетаскиваться.
(2)ondrag: исходный объект перетаскивается (мышь может двигаться, а может и не двигаться)
(3)ondragend: исходный объект перетаскивается до конца.
Перетащите исходный объект, чтобы ввести события, которые могут быть вызваны указанным выше целевым объектом:
(1) ondragenter: целевой объект перетаскивается в исходный объект.
(2) ondragover: целевой объект перетаскивается исходным объектом и нависает над ним.
(3)ondragleave: исходный объект перетаскивается от целевого объекта.
(4) ondrop: перетащите исходный объект и отпустите/отпустите над целевым объектом.
API перетаскивания имеет в общей сложности 7 функций! !
5. Как перенести данные между событием перетаскиваемого исходного объекта и событием целевого объекта.HTML5 предоставляет новый атрибут для всех событий, связанных с перетаскиванием:
e.dataTransfer { } //数据传递对象
Функция: используется для передачи данных между событиями исходного объекта и целевого объекта.
Сохраните данные в обработчике событий исходного объекта:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Считайте данные в обработчике событий целевого объекта:
вар v = e.dataTransfer.getData(k);
Пример 1. Реализуйте небольшой самолет, который может двигаться при перетаскивании мыши.
Совет: самолет должен быть абсолютно позиционирован! Получите значение координаты мыши в событии ondrag! ! !
Код выглядит следующим образом:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { поля: 0; позиция: относительная; img { позиция: абсолютная } </style> </head> <body> <h3>Маленькая плоскость, которая перемещается при перетаскивании мыши</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('Источник события p3 начинает перетаскивание'); //Записываем смещение мыши на плоскости сразу после перетаскивания offsetX= e.offsetX; offsetY= e. .ondrag=function(e){ console.log('Источник события p3 перетаскивается'); var x= e.pageX; var y= e.pageY; console.log(x+'-'+y); //В последний момент события перетаскивания координаты мыши не могут быть прочитаны, и страницы pageX и pageY становятся 0 if(x==0 && y==0 ){ return; // Не обрабатывать ситуацию, когда X и Y равны 0 в последний момент перетаскивания} x-=offsetX; y-=offsetY; p3.style.left=x+'px'; топ = y+'px' } p3.ondragend=function(){ console.log('Перетаскивание исходного объекта p3 заканчивается'); } </script> </body> </html>Эффект следующий:
Пример второй:
Имитирует эффект мусорной корзины на компьютере. Всего отображаются три маленьких плоскости. После перетаскивания маленькой плоскости наверх корзины маленькая плоскость удаляется из дерева DOM.
Совет: Для удаления необходимо удалить элемент из дочернего узла DOM, а поведение ondragover по умолчанию необходимо предотвратить! ! Используйте передачу данных между исходным объектом и целевым объектом, чтобы записать значение идентификатора небольшого самолета! ! !
Важная информация:
ondragover имеет поведение по умолчанию! ! ! То есть, когда срабатывает ondragover, ondrop завершится неудачно! ! ! ! Это может быть проблема с версией браузера, которую можно решить только в том случае, если браузер будет постоянно обновляться в будущем! !
Как это остановить?
ondragover= function(e){ //Когда исходный объект нависает над целевым объектом e.preventDefault(); //Предотвращаем поведение по умолчанию, чтобы падение могло сработать...}ondrop= function(e){ // исходный объект освобождается в целевом объекте...}Код выглядит следующим образом:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>Удалить дочерние элементы из дерева DOM после перетаскивания плоскости в корзину</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 class =src src=img/p5.png> <script> //Добавляем мониторинг событий для исходного объекта - записываем, какой исходный объект var был перетащен srcList = document.querySelectorAll('.src');//Находим все элементы img for(var i=0; i<srcList.length; i++){ //Обходим элементы img var p = srcList[i]; = function(e){ //Начинаем перетаскивать исходный объект e.dataTransfer.setData('PlaneID',this.id); //Сохраняем данные — идентификатор элемента img } p.ondrag = function(){} p.ondragend = function(){} } //Добавляем прослушивание событий для целевого объекта - удаляем перетаскиваемый исходный объект object console .log('drag enter'); throw.style.opacity = 1; //Изменяем прозрачность на 1 }rash.ondragleave= function(){ //После того, как исходный объект покидает целевой объект, console.log(' перетащить отпуск') ; мусор.стиль.opacity = .2; //Изменяем прозрачность на 0,2 } мусор.ondragover= function(e){ //Исходный объект нависает над целевым объектом e.preventDefault(); //Предотвращаем поведение по умолчанию, Make drop Triggerable}rash.ondrop= function(e){ //Исходный объект освобождается в целевом объекте console.log('drop'); //Удаляем перетаскиваемый исходный объект var id = e.dataTransfer.getData('PlaneID'); //Получаем значение data-id var p = document.getElementById(id); //Находим связанные элементы по значению идентификатора p. ParentNode.removeChild(p); //Удалить дочерние узлы из родительского элемента} </script> </body> </html>Эффект следующий:
После перетаскивания маленького самолета в мусорное ведро удалите:
Как показано на картинке, изначально маленьких самолетов было три, а теперь их стало два! ! !
6. Дополнительные сведения об API перетаскивания! ! (Важно, вас могут спросить во время собеседования!!)Вопросы на собеседовании:
Как отобразить картинку с клиента (компьютера) на веб-странице?
Как перетащить веб-страницу клиента для отображения на загруженной странице на стороне сервера?
Что означают эти два вопроса?
Обычно мы перетаскиваем картинку с компьютера в браузер, чтобы осуществить операцию загрузки! ! ! Согласно стандартам, существовавшим до версии H5, невозможно напрямую перетащить изображение в браузер для отображения! ! Но с появлением новых возможностей H5 была добавлена функция API перетаскивания, которая прекрасно реализует эту функцию! ! !
Случаи применения:
На определенном сайте загрузите изображение в качестве аватара.
Загрузить фото...
Новые объекты файловых операций в HTML5:
Файл: представляет файловый объект.
FileList: представляет объект списка файлов, подобный массиву.
FileReader: используется для чтения данных из файлов.
FileWriter: используется для записи данных в файлы.
Связанные функции:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Находим перетаскиваемый файл var fr = new FileReader(); //Создаем программу чтения файлов fr.readAsURLData(f); //Читаем содержимое файла fr.onload = function(){ //Чтение завершено img.src = fr.result; //Используем прочитанные данные} }Код выглядит следующим образом:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px Solid #aaa; радиус границы: 3 пикселя; отступ: 10 пикселей; минимальная высота: 400 пикселей; </style> </head> <body> <h1>Расширенные знания API перетаскивания</h1> <h3>Перетащите свою фотографию в поле ниже</h3> <div id=container></ div > <script> //Прослушиваем событие перетаскивания документа — отменяем его поведение по умолчанию: открываем изображение в новом окне document.ondragover = function(e){ e.preventDefault(); //Включаем срабатывание события перетаскивания; } Document.ondrop = function(e){ e.preventDefault(); //Запретить открытие изображения в новом окне, иначе операция загрузки все равно будет выполнена! ! ! } // Прослушиваем событие удаления div#container, пытаемся прочитать освобожденные данные изображения и отобразить их.Container.ondragover = function(e){ e.preventDefault(); .log('Клиент перетащил изображение и отпустил его...') //Текущий целевой объект считывает данные, хранящиеся в исходном объекте перетаскивания //console.log(e.dataTransfer); //Отображение проблемы //console.log(e.dataTransfer.files.length); //Количество перетаскиваемых изображений var f0 = e.dataTransfer.files[0]; //console.log(f0); /File object File //Чтение данных из файлового объекта var fr = new FileReader(); //fr.readAsText(f0); //Читание текстовой строки из файла fr.readAsDataURL(f0); //Чтение данных URL из файла fr.onload = function(){ console.log('Чтение файла завершено') console.log(fr.result); var img = new Image(); ; //Контейнер данных URL-адреса.appendChild(img) } </script> </body> </html></span>Эффект следующий:
Подвести итогВыше приведено подробное объяснение классических примеров API перетаскивания HTML5, представленных редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. . Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!