Drag and Drop v HTML - Příklad provádění přetažení 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 nyní jednou z nejnovějších funkcí obsažených v HTML. Drag and drop je proces, který začíná, když uživatel vybere přetahovatelný prvek a umístí tento prvek do komponenty přetahování a umístí jej na určené místo. Používá model události Document Object Model (DOM) a některé události přetažení, které pocházejí z událostí myši. Funguje jako nejvýkonnější rozhraní, které je zodpovědné za kopírování, zaznamenávání a mazání prvků pomocí myši. V nejnovějším HTML funguje funkce Drag and Drop na nejnovějších událostech, jako je dragstart.

Události pro Drag and Drop

V nejnovějších funkcích drag and drop (dnd) je zahrnuto několik událostí, podívejme se jeden po druhém takto:

Podívejme se na některé atributy dat, ke kterým dojde operace Drag and Drop:

1. dataTransfer.dropEffect (= hodnota): Tento atribut se používá k zobrazení, která operace právě probíhá. lze ji nastavit tak, aby nahradila již vybranou operaci. Hodnoty v něm obsažené jako kopie, odkaz, žádný nebo přesun.

2. dataTransfer.effectAllowed (= hodnota): Jakékoli operace jsou povoleny a budou vráceny prostřednictvím tohoto atributu. Je také možné nastavit, na změnu již vybrané operace.

3. dataTransfer.files: Tento datový atribut slouží k získání fileList souborů, které budou přetaženy.

4. dataTransfer.addElement (element): Používá se k vložení již existujícího prvku do seznamu dalších prvků, které jsou užitečné pro vykreslení zpětné vazby.

5. dataTransfer.setDragImage (element, x, y): Tento atribut je trochu stejný jako výše pro aktualizaci zpětné vazby a pomoci změnit již existující zpětnou vazbu

6. dataTransfer.clearData ((format)): Pomáhá uživateli odstranit data z již definovaného formátu. Pokud uživatel argument vynechal, IT odstraní všechna data.

7. dataTransfer.setData (formát, data): Je to jeden z oblíbených atributů používaných k přidání specifikovaných dat.

8. data = dataTransfer.getData (format): Tento atribut v operaci Drag and Drag slouží k extrahování specifikovaných dat. V případě, že neexistují žádná stejná data, vrátí se do prázdného řetězce

Syntaxe přetažení v HTML

Zde je několik kroků definujících syntaxi pro přetažení:

Vyberte objekt, který má být přetažen: nastavte atribut true.

Začněte přetahovat objekt:

function dragStart(ev)()

Přetažení objektu:

function dragDrop(ev)()

Příklady přetažení v HTML

Následující příklad ukáže, jak přesně bude operace přetahování v HTML probíhat:

Pří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: Před možností volby přetažení bude následující:

Po provedení operace Drag and Drop bude výstup následující:

Příklad č. 2

Tady uvidíme další příklad, ve kterém přesuneme obrázek z jednoho místa na jiné určené místo, jak je znázorněno níže:

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ázka Drag and Drop