Drag & Drop е много обща черта. Това е, когато "хванете" обект и го преместите на друго място.
В HTML5, Drag & Drop(влачене и пускане) е част от стандарта, и всеки елемент може да бъде draggable.
Поддръжка от браузъри
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari поддържат drag and drop.
Забележка: Drag and Drop не работи в Safari 5.1.7 и по-ранни версии.
Drag & Drop Пример Примерът по-долу е просто влачене и пускане:
Кода може да изглежда сложно, но нека минем през всички различни части на Drag and Drop кода.
1.Правим елемент Draggable
Първо:За да бъде елемент draggable,задайте draggable атрибута вярно(true):
<img draggable="true">
2.Определяме какво ще плъзгаме - ondragstart и setData ()
След това, да уточним какво трябва да се случи, когато елементът се влачи.
В примера по-горе, ondragstart атрибут нарича плъзнете събитие(drag(event)), в който се посочва какви данни да се влачат.
Методът на dataTransfer.setData () определя типа на данните и стойността на влачените данни:
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
В този случай, типът на данните е text/ HTML" и номиналната стойност е идентификатора на draggable елемент ("drag1").
3.Къде да пуснем - ondragover
The ondragover случай уточнява, където могат да бъдат пуснати влачените данни.
По подразбиране, данни / елементите не могат да бъдат пуснати в други елементи. За да се позволи
пускане,
трябва да се предотврати манипулирането на неизпълнение от страна на елемента.
Това се прави, като извикате метода ondragoverevent event.preventDefault ():
В примера по-горе, ondrop атрибута се нарича функция,пускащо събитие:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
обяснение на кода:
1.Извикайте preventDefault (), за да се предотврати манипулирането
на браузър по подразбиране на данните (по подразбиране е отворен линк на пускане)
2.Вземете влачените данни с метода dataTransfer.getData (). Този метод ще се върнат
всички данни, които се определят за един и същи вид в setData () метод
3.Влачените данни са идентификатор на влачения елемент ("drag1")
4.Добавяне на влачения елемент в drop(event) елемента
