Руководство HTML5 - 3. Как реализовать функцию перетаскивания элементов HTML

Автор：Eve Cole Время обновления：2025-04-12 09:48:02

Содержание этой статьи о том, как реализовать функцию перетаскивания элементов HTML в HTML5/«HTML5. Чтобы реализовать перетаскивание до HTML5, вам необходимо использовать JS. Теперь HTML5 поддерживает функцию перетаскивания и падения внутри, но для реализации чуть более сложных функций JS незван. Пусть посмотрите на несколько примеров ниже.

1. Создайте объект перетаскивания

Мы можем рассказать браузеру через атрибут Draggeble, который необходимо для реализации функции перетаскивания. Draggable имеет три значения: true: элемент можно перетаскивать; Неверно: элемент не может быть перетаскивается; Авто: браузер определяет, можно ли перетаскивать элемент сам по себе.

Значение системы по умолчанию - AUTO, но браузер поддерживает различные функции перетаскивания различных элементов в случае AUTO, таких как: он поддерживает объекты IMG, но не поддерживает объекты DIV. Так что, если вам нужно перетащить элемент, лучше всего установить Draggale на True. Давайте посмотрим на пример ниже:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

#SRC> *

{

Плавание: осталось;

}

#Target, #SRC> IMG

{

Граница: тонкий твердый черный;

Заполнение: 2px;

Маржа: 4px;

}

#цель

{

Высота: 123px;

Ширина: 220px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

#Target> IMG

{

Полевая: 1px;

}

</style>

</head>

<тело>

Попасть здесь </p>

</div>

<Скрипт>

var src = document.getElementbyId ("src");

var target = document.getElementbyId ("target");

</script>

</body>

</html>

Эффект бега:

2. Обработка событий перетаскивания

Теперь давайте поймем события, связанные с перетаскиванием. Существует два типа событий, один из них является событием объекта Drag, а другой - это событие области Drop. События перетаскивания включают: Dragstart: запускается, когда начинается перетаскивание элемента; перетаскивание: запускается во время перетаскивания элемента; Драгенд: сработано, когда заканчивается перетаскивание элемента. Давайте приведем пример ниже:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

#SRC> *

{

Плавание: осталось;

}

#Target, #SRC> IMG

{

Граница: тонкий твердый черный;

Заполнение: 2px;

Маржа: 4px;

}

#цель

{

Высота: 123px;

Ширина: 220px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

#Target> IMG

{

Полевая: 1PX;

}

img.dragged

{

фоновый цвет: оранжевый;

}

</style>

</head>

<тело>

Попасть здесь </p>

</div>

<Скрипт>

var src = document.getElementbyId ("src");

var target = document.getElementbyId ("target");

var msg = document.getElementbyId ("msg");

src.ondragstart = function (e) {

e.target.classlist.add ("перетаскивать");

}

src.ondragend = function (e) {

e.target.classlist.remove ("перетаскивать");

msg.innerhtml = "Drop Here";

}

src.ondrag = function (e) {

msg.innerhtml = e.target.id;

}

</script>

</body>

</html>

Эффект бега:

3. Создайте зону доставки

Давайте посмотрим на события, связанные с зоной доставки: Dragenter: запускается, когда объект сопротивления входит в область доставки; Драгвер: запускается, когда объект сопротивления движется в зоне доставки; Draglave: объект перетаскивания не доставляется в зону доставки и запускается, когда он покидает область доставки; Падение: запускается, когда объект перетаскивания помещается в зону доставки.

Давайте посмотрим на пример:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

#SRC> *

{

Плавание: осталось;

}

#Target, #SRC> IMG

{

Граница: тонкий твердый черный;

Заполнение: 2px;

Маржа: 4px;

}

#цель

{

Высота: 123px;

Ширина: 220px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

#Target> IMG

{

Полевая: 1PX;

}

img.dragged

{

Фоно-цвета: Lightgrey;

}

</style>

</head>

<тело>

Попасть здесь </p>

</div>

<Скрипт>

var src = document.getElementbyId ("src");

var target = document.getElementbyId ("target");

var msg = document.getElementbyId ("msg");

var draggedid;

target.ondragenter = handledRag;

Target.OndRagover = handledRag;

функция обработка

e.preventdefault ();

}

target.ondrop = function (e) {

var newelem = document.getElementbyId (draggedid) .clonenode (false);

target.innerhtml = "";

target.appendchild (newelem);

e.preventdefault ();

}

src.ondragstart = function (e) {

draggedid = e.target.id;

e.target.classlist.add ("перетаскивать");

}

src.ondragend = function (e) {

varelems = document.queryselectorall (".. перетаскивает");

for (var i = 0; i <elems.length; i ++) {

elems [i] .classlist.remove ("перетаскивать");

}

</script>

</body>

</html>

Результаты работы:

4. Используйте Datatransfer

Мы используем Datatransfer для передачи данных из объектов перетаскивания в область доставки. Datatransfer имеет следующие свойства и методы: Типы: вернуть формат данных; getData (<Format>): возвращает указанные данные формата; SETDATA (<Format>, <Data>): устанавливает указанные данные формата; clearData (<Format>): удаляет указанные данные формата; Файлы: возвращает массив файлов, который был доставлен.

Давайте посмотрим на следующий пример, эффект, который он достиг, такой же, как пример 3:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

#SRC> *

{

Плавание: осталось;

}

#SRC> IMG

{

Граница: тонкий твердый черный;

Заполнение: 2px;

Маржа: 4px;

}

#цель

{

Граница: тонкий твердый черный;

Маржа: 4px;

}

#цель

{

Высота: 123px;

Ширина: 220px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

img.dragged

{

фоновый цвет: оранжевый;

}

</style>

</head>

<тело>

Попасть здесь </p>

</div>

<Скрипт>

var src = document.getElementbyId ("src");

var target = document.getElementbyId ("target");

target.ondragenter = handledRag;

Target.OndRagover = handledRag;

функция обработка

e.preventdefault ();

}

target.ondrop = function (e) {

var droppedId = e.datatransfer.getdata ("text");

var newelem = document.getElementbyId (DroppedId) .clonenode (false);

target.innerhtml = "";

target.appendchild (newelem);

e.preventdefault ();

}

src.ondragstart = function (e) {

e.datatransfer.setdata ("text", e.target.id);

e.target.classlist.add ("перетаскивать");

}

src.ondragend = function (e) {

varelems = document.queryselectorall (".. перетаскивает");

for (var i = 0; i <elems.length; i ++) {

elems [i] .classlist.remove ("перетаскивать");

}

</script>

</body>

</html>

5. перетаскивать файл

HTML5 поддерживает API файла, который позволяет нам манипулировать локальными файлами. Как правило, мы не используем API файла напрямую. Мы можем использовать его в сочетании с другими функциями, такими как сочетание эффектов перетаскивания, как показано в следующем примере:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

тело> *

{

Плавание: осталось;

}

#цель

{

Граница: средний двойной черный;

Маржа: 4px;

Высота: 75px;

Ширина: 200px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

стол

{

Маржа: 4px;

пограничный коллапс: коллапс;

}

Т.Д.

{

Заполнение: 4px;

}

</style>

</head>

<тело>

Отбросьте файлы здесь </p>

</div>

<таблица идентификатора = "data">

</table>

<Скрипт>

var target = document.getElementbyId ("target");

target.ondragenter = handledRag;

Target.OndRagover = handledRag;

функция обработка

e.preventdefault ();

}

target.ondrop = function (e) {

var files = e.datatransfer.files;

var tableelem = document.getElementbyId ("data");

tableelem.innerhtml = "<tr> <th> name </th> <th> type </th> <th> size </th> </tr>";

для (var i = 0; i <files.length; i ++) {

var row = "<tr> <td>" + files [i] .name + "</td> <td>" + files [i] .type + "</td> <td>" + files [i] .size + "</td> </tr>";

tableelem.innerhtml += row;

}

e.preventdefault ();

}

</script>

</body>

</html>

DataTransfer возвращает объект FileList, который мы можем рассматривать как объект массивы файлов, а файл содержит следующие свойства: имя: имя файла; Тип: Тип файла (тип MIME); Размер: размер файла.

Эффект бега:

6. Загрузить файлы

Ниже приведен пример загрузки файлов путем перетаскивания и отброса Ajax.

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

.стол

{

дисплей: таблица;

}

.ряд

{

дисплей: таблица;

}

.клетка

{

дисплей: табличная клетка;

Заполнение: 5px;

}

.этикетка

{

Текст-альбом: верно;

}

#цель

{

Граница: средний двойной черный;

Маржа: 4px;

Высота: 50px;

Ширина: 200px;

Текст-альбом: Центр;

дисплей: таблица;

}

#Target> с

{

дисплей: табличная клетка;

Вертикальная атака: средняя;

}

</style>

</head>

<тело>

<div>

Бананы: </div>

<div>

</div>

<div>

Яблоки: </div>

<div>

</div>

<div>

Вишня: </div>

<div>

</div>

<div>

Файл: </div>

<div>

</div>

<div>

Всего: </div>

пункты </div>

</div>

Отбросьте файлы здесь </p>

</div>

Отправить форму </button>

</form>

var target = document.getElementbyId ("target");

var httprequest;

var filelist;

target.ondragenter = handledRag;

Target.OndRagover = handledRag;

функция обработка

e.preventdefault ();

}

target.ondrop = function (e) {

filelist = e.datatransfer.files;

e.preventdefault ();

}

document.getElementById ("отправить"). OnClick = функция handlebuttonpress (e) {

e.preventdefault ();

var form = document.getElementbyId ("fruitform");

var formData = new FormData (form);

if (filelist) {

for (var i = 0; i <filelist.length; i ++) {

formData.append ("file" + i, filelist [i]);

}

httprequest = new xmlhttprequest ();

httprequest.onreadystatechange = HandlerSponse;

httprequest.open ("post", form.action);

httprequest.send (formData);

}

function handleresponse () {

if (httprequest.readystate == 4 && httprequest.status == 200) {

var data = json.parse (httprequest.responsetext);

document.getElementById («Результаты»). innerHtml = "Вы заказали" + data.total + "элементы";

}

</script>

</body>

</html>

Эффект:

Некоторые из вышеперечисленных примеров могут иметь разные браузеры, использующие эффекты. Я использую хромированный браузер. За исключением примеров 5 и 6, которые не поддерживают несколько файлов, другие примеры работают нормально. Вы можете скачать демо.

Демонстрация Адрес: html5guide.daggable.rar