Drag and Drop v HTML Príklad na vykonanie drag and drop v HTML

• Úvod do drag and drop v HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Úvod do drag and drop v HTML

Drag and Drop je teraz jednou z najnovších funkcií zahrnutých v HTML. Drag and drop je proces, ktorý sa spustí, keď používateľ vyberie dragable element a umiestni tento element do droppable komponenty a umiestni ho na určené miesto. Používa sa model udalosti Document Object Model (DOM), ako aj niektoré udalosti ťahania, ktoré pochádzajú z udalostí myši. Funguje ako najúčinnejšie rozhranie, ktoré je zodpovedné za kopírovanie, zaznamenávanie a mazanie prvkov pomocou myši. V najnovšej funkcii HTML funguje funkcia Drag and Drop na najnovších udalostiach, ako je napríklad dragstart, rovnako ako mnoho iných udalostí, ktoré sa budú používať.

Udalosti pre drag and drop

V najnovšej funkcii drag and drop (dnd) je zahrnutých niekoľko udalostí. Pozrime sa jeden po druhom takto:

Pozrime sa na niektoré atribúty údajov, pri ktorých sa uskutoční operácia Drag and Drop:

1. dataTransfer.dropEffect (= hodnota): Tento atribút sa používa na označenie, ktorá operácia sa práve vykonáva. dá sa nastaviť, aby nahradil už vybranú operáciu. Hodnoty v ňom obsiahnuté ako kópia, odkaz, žiadna alebo presunutá.

2. dataTransfer.effectAllowed (= hodnota): Akékoľvek operácie sú povolené a budú vrátené prostredníctvom tohto atribútu. Je tiež možné nastaviť, na zmenu už vybranej operácie.

3. dataTransfer.files: Tento dátový atribút sa používa na získanie súboru Zoznam súborov, ktoré sa budú presúvať.

4. dataTransfer.addElement (element): Používa sa na vloženie už existujúceho prvku do zoznamu ďalších prvkov, ktoré sú užitočné na vykreslenie spätnej väzby.

5. dataTransfer.setDragImage (element, x, y): Tento atribút je trochu rovnaký ako vyššie pre aktualizáciu spätnej väzby a pomoci pri zmene už existujúcej spätnej väzby.

6. dataTransfer.clearData ((format)): Pomáha používateľovi odstraňovať údaje z už definovaného formátu. Ak užívateľ argument vynechal, IT odstráni všetky údaje.

7. dataTransfer.setData (formát, dáta): Je to jeden z populárnych atribútov použitých na pridanie zadaných údajov.

8. data = dataTransfer.getData (format): Tento atribút v operácii Drag and Drag slúži na extrahovanie špecifikovaných údajov. V prípade, že neexistujú rovnaké údaje, vráti sa do prázdneho reťazca

Syntax Drag and Drop v HTML

Tu je niekoľko krokov, ktoré definujú syntax pre drag and drop:

Vyberte objekt, ktorý má byť pretiahnutý: nastavte atribút na true.

Začať ťahať objekt:

function dragStart(ev)()

Drop objekt:

function dragDrop(ev)()

Príklady drag and drop v HTML

Nasledujúci príklad ukáže, ako presne bude operácia drag and drop vykonávať v HTML:

Príklad č. 1

kód:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Výstup: Pred možnosťou voľby drag and drop bude nasledujúci výstup:

Po vykonaní operácie Drag and Drop bude výstup nasledovný:

Príklad č. 2

Tu uvidíme ďalší príklad, v ktorom presuneme obrázok z jedného miesta na iné určené miesto, ako je to znázornené nižšie:

kód:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Ukážka Drag and Drop