Комментарий: Перед HTML5 для реализации операций перетаскивания элементов веб -страницы необходимо было полагаться на MouseDown, MouseMove, MouseUp и другие API, чтобы реализовать их через большое количество кода JS. Теперь HTML5 значительно упрощает сложность операций перетаскивания элементов веб -страницы. В дополнение к поддержке перетаскивания элементов внутри браузера, API также поддерживает перетаскивание данных между браузером и другими приложениями.
Перед HTML5, чтобы реализовать операции перетаскивания элементов веб -страницы, нам нужно полагаться на Mousedown, MouseMove, MouseUp и другие API, чтобы реализовать их через большое количество кода JS; HTML5 представляет API, который непосредственно поддерживает операции перетаскивания, что значительно упрощает сложность программирования операций перетаскивания элементов веб -страницы. В дополнение к поддержке перетаскивания элементов внутри браузера, эти API также поддерживают перетаскивание данных между браузером и другими приложениями.
В этой статье используется простой пример, чтобы продемонстрировать, как использовать API Drag and Drop в HTML5.
Сцена:
Как показано на рисунке ниже, мы хотим реализовать:
Перетащите фотографию из левой области альбома в правую область мусорного бака, перетаскивая и отбросив; Во время процесса перетаскивания часть теплого напоминания следует быстро напомнить, и в настоящее время выполняется операция перетаскивания;
Метод реализации:
Как показано в вышеуказанном интерфейсе, код HTML является относительно простым, следующим образом:
<! Doctype html>
<html>
<голова>
<title> HTML5 реализует операцию перетаскивания </title>
<meta charset = "utf-8"/>
<style>
.альбом
{
Граница: 3PX пунктир #CCC;
Плавание: осталось;
Маржа: 10px;
Мин-высот: 100px;
Заполнение: 10px;
Ширина: 220px;
}
</style>
</head>
<тело ">
<div>
<h2> теплое напоминание: вы можете перетащить фотографии прямо в мусорное ведро </h2>
</div>
<div>
<h2> альбом </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<div>
<h2> мусорное банка </h2>
</div>
<br/>
</body>
</html>
ПРИМЕЧАНИЕ. Если вы хотите реализовать операции перетаскивания, вам нужно добавить атрибут Draggable = true к элементам для перетаскивания и отброса;
Затем добавьте следующий код JS в событие Onload. Комментарии более подробно и не будут объяснены отдельно.
<Скрипт>
function init () {
var info = document.getElementbyId ("info");
// Получить элементы перетаскивания. Этот пример - Div, где находится альбом.
var src = document.getElementbyId ("альбом");
// начало операции перетаскивания
src.ondragstart = function (e) {
// Получить удостоверение личности фото перетаскивания
var dragimgid = e.target.id;
// Получить перетаскиваемый элемент
var dragimg = document.getElementbyid (dragimgid);
// заканчивается операция перетаскивания
dragimg.ondragend = function (e) {
// восстановить сообщение напоминания
info.innerhtml = "<h2> Творческое напоминание: вы можете перетащить фотографии непосредственно в мусорное ведро </h2>";
};
e.datatransfer.setdata ("text", dragimgid);
};
// процесс перетаскивания
src.ondrag = function (e) {
info.innerhtml = "<h2>-фото перетаскивается-</h2>";
}
// Получить целевой элемент перетаскивания
var target = document.getElementById ("Trash");
// закрыть обработку по умолчанию;
target.ondragenter = function (e) {
e.preventdefault ();
}
target.ondragover = function (e) {
e.preventdefault ();
}
// что -то перетаскивает и падает в целевой элемент
target.ondrop = function (e) {
var draggedid = e.datatransfer.getdata ("text");
// Получить объект DOM в альбоме
var oldelem = document.getElementbyid (draggedid);
// Удалить узел фото с альбома Div
OldElem.parentNode.RemoveChild (OldElem);
// Добавить узел DOM с перетаскиванием в Trash Div;
target.appendchild (Oldelem);
info.innerhtml = "<h2> Творческое напоминание: вы можете перетащить фотографии непосредственно в мусорное ведро </h2>";
e.preventdefault ();
}
}
</script>
Осознайте эффект: