HTML5+-+Влечи+и+Остави+(drag+and+drop)

//Претходно://Геолокација // Следно: //Складирање на Интернет // Почетoк: // HTML5 Tуторијал

Влечи и остави е многу честа карактеристика. Тоа е кога ќе “грабнете” елемент и ќе го преместите на друга локација. Во HTML5 влечи и остави е дел од стандардите и секој елемент може да се влече.

__Пример__
<!DOCTYPE HTML>        function allowDrop(ev)   {   ev.preventDefault;   }   function drag(ev)   {   ev.dataTransfer.setData("Text",ev.target.id);   }   function drop(ev)   {   ev.preventDefault;   var data = ev.dataTransfer.getData("Text");   ev.target.appendChild(document.getElementById(data));   }             <img id="drag1" src="img_logo.gif" draggable="true"   ondragstart="drag(event)" width="336" height="69"

Направи елементот да е влечлив
Пред сè: За еден елемент да е влечлив, draggable атрибутот се сетира на true.

Што да се влече – ondragstart и setData
Треба да се специфицира што ќе се случи со елементот откако ќе се повлече. Ondragstart атрибутот повикува функција, настан, а потоа специфицира кој податок да биде влечен. Meтодот dataTransfer.setData го сетира податочниот тип и вредноста на влечениот податок:

}
Во овој случај, податочниот тип е “Text” и вредноста е ID на влечениот елемент (“drag1”).

Каде да се остави – ondragover
Настанот ondragover специфицира каде влечениот објект да биде оставен. Најчесто податочните елементи неможат да бидат оставени во друг елемент. За да се дозволи оставањето, мора да се спречи стандардното ракување со елементот. Ова се прави со повикување на event.preventDefault методот за ondragover настанот:

Остави – ondrop
Кога влечениот елемент ќе се остави, се случува настанот drop:

Oбјаснување на примерот

 * Се повикува preventDefault за да се спречи стандардното ракување на пребарувачот со податокот.
 * Се зема влечениот елемент со методот dataTransfer.getData(“Text”). Oвој метод ќе го врати секој податок што беше сетиран со истиот тип во методот setData.
 * Влечениот податок е ID на влечениот елемент (“drag1”).
 * Се додава влечениот елемент во елементот остави.

//Претходно:// Геолокација // Следно: // Складирање на Интернет // Почетoк: // HTML5 Tуторијал