Permalink: http://how-to.mldgroup.com/index.php?article=ako-aplikovat-dnd-na-elementy-javascript18.11.2016, Matej LednárKategória: DOMV tomto článku predstavím riešenie, ktoré demonštruje prácu s drag and drop na elemente. Celý princíp je postavený na tom, že pri začatí akcie drag je elementu pridelené špeciálne id a po skončení, pri akcii drop, je na základe tohto id element vyhľadaný a pridaný do zoznamu.Ako prvé vytvorím krátke CSS, ktoré bude slúžiť na sprehľadnenie elementov. Príklad bude pozostávať z dvoch štvorcov - boxov. Položka v ľavom boxe sa bude dať pridávať do pravého boxu. Počet pridaní nie je limitovaný. V tomto prípade demonštrujem funkciu copy. Ak by nebol aplikovaný zápis var clonNode = node.cloneNode(true); a namiesto target.appendChild(clonNode); by bol použitý zápis target.appendChild(node);, išlo by o premiestnenie. Keďže premiestnenie je pomaly v každom príklade na internete, rozhodol som sa demonštrovať funkciu copy. V prvom boxe je zakázané zobrazenie odrážok. Pri akcii drop je vykonaných niekoľko kontrolných opatrení, aby sa predišlo chybám. Kontroluje sa cieľový element a povolená akcia (Copy).Príklad: Zvýraznenie boxov cez CSS. Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box1, #box2 {
float:left;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
#box1 {
list-style-type: none;
width:75px;
height:75px;
}
#box2 {
margin-left: 100px;
background-color: #FF6699;
padding-left: 30px;
width:280px;
height:180px;
}
Príklad: Zápis do elementu <body>.
1
2
3
4
5
6
7
8
<ul id="box1">
<li draggable="true">Drag me</li>
</ul>
<div id="box2">
<div>Drop here</div>
<ul class="list"></ul>
</div>
Príklad: Zápis do element <script>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function dragInit(ev){
ev.dataTransfer.effectAllowed = 'copy';
var node = ev.target;
node.id ="_draggedElement";
ev.dataTransfer.setData("Text", node.id);
return true;
}
function allowDrop(ev){
ev.preventDefault();
return true;
}
function dropComplete(ev){
if(ev.dataTransfer.effectAllowed =="copy"){
var id = ev.dataTransfer.getData("Text");
var node =document.getElementById(id);
node.removeAttribute("id");
var clonNode = node.cloneNode(true);
clonNode.removeAttribute("draggable");
var target =document.getElementById("box2").querySelector(".list");
if(target){
target.appendChild(clonNode);
}
}
ev.stopPropagation();
return false;
}
var box1 =document.getElementById("box1");
box1.addEventListener("dragstart", dragInit);
var box2 =document.getElementById("box2");
box2.addEventListener("drop", dropComplete);
box2.addEventListener("dragover", allowDrop);
Po vytvorení boxov s obsahom pre kopírovanie a vkladanie je potrebné vytvoriť eventy. V tomto prípade nám postačia tri. Jeden pre ľavý box a dva pre pravý box. V ľavom boxe pri evente dragstart definujem typ akcie, vytvorím na ťahanom elemente špeciálne id a obe informácie uložím do objektu dataTransfer. Na druhom boxe povolím cez dragover akciu drop a na event drop skontrolujem či súhlasí typ akcie (Copy) a cieľ pre vloženie ťahaného elementu. Kontrola zamedzí problémom, ak v dokumente náhodou existuje viacero rovnakých id. Následne vytvorím klon ťahaného elementu, ktorý som si vyhľadal cez atribút id, ktorého hodnotu som si odložil do vlastnosti Text. Nakoniec vložím ťahaný element do pripraveného zoznamu.
Záver
Ako vidieť, DnD v JavaScripte nie je až tak zložité, aj keď je tu stále problém so zobrazením ikon počas ťahania a drop akcie. Ešte chcem upozorniť, že ak sa nevykoná akcia na dragover, tak sa nikdy nevykoná event drop. Na tomto probléme som strávil hodiny, keď som nevedel pochopiť, prečo sa mi drop event nikdy nespustí.18.11.2016, Matej LednárKategória: DOMDOMDnDdataTransfereffectAllowedaddEventListenercopyDOMNodeŽiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.
Komentáre
Článok neobsahuje zatiaľ žiadne komentáre.
Pridať komentár
Meno (povinné)WebSpráva (povinné)Napíš výsledok: 6+7-2Odoslať
