Povlecite in spustite v HTML - Primer izvedbe povlečenja in spuščanja v HTML

• Uvod v povleci in spusti 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





Uvod v povleci in spusti v HTML

Povleci in spusti je zdaj ena izmed najnovejših funkcij, vključenih v HTML. Povleci in spusti je postopek, ki se začne, ko uporabnik izbere element, ki ga je mogoče vleči, in ga vstaviti v komponento, ki jo je mogoče spustiti, in ga postaviti na določeno mesto. Uporablja model dogodkov modela DOM (Document Object Model - DOM) in nekatere vlečne dogodke, ki prihajajo iz mišjih dogodkov. Deluje kot najzmogljivejši vmesnik, ki je odgovoren za kopiranje, snemanje, brisanje elementov z miško. V najnovejšem HTML-ju funkcionalnost povleci in spusti deluje na najnovejše dogodke, kot so dragstart, dragend, kot so številni drugi dogodki.

Dogodki za povleci in spusti

V najnovejši funkciji povleci in spusti (dnd) je več dogodkov, poglejmo enega za drugim, kot sledi:

Oglejmo si nekaj podatkovnih atributov, v katerih se bo izvajalo operacijo povleci in spusti:

1. dataTransfer.dropEffect (= vrednost): Ta atribut se uporablja za prikaz, katere operacije se trenutno izvajajo. lahko ga nastavite tako, da nadomesti že izbrano operacijo. Vrednosti, vključene v njej, so kopija, povezava, nobena ali premik.

2. dataTransfer.effectAllowed (= vrednost): Ne glede na to, katere dejavnosti so dovoljene, ki se bodo vrnile s tem atributom. Možno je nastaviti tudi spreminjanje že izbranega postopka.

3. dataTransfer.files: Ta atribut podatkov, ki se uporablja za pridobivanje fileList datotek, ki se bodo vlekle.

4. dataTransfer.addElement (element): Uporablja se za vstavljanje že obstoječega elementa na seznam drugih elementov, ki so uporabni za prikaz povratnih povratnih informacij.

5. dataTransfer.setDragImage (element, x, y): Ta atribut je malo enak kot zgoraj za posodabljanje povratnih informacij o povleku in pomaga spremeniti že obstoječe povratne informacije

6. dataTransfer.clearData ((format)): Uporabniku pomaga odstraniti podatke iz že določene oblike. Če je uporabnik argument izpustil, bo IT odstranil vse podatke.

7. dataTransfer.setData (oblika, podatki): To je eden izmed priljubljenih atributov, ki se uporabljajo za dodajanje določenih podatkov.

8. data = dataTransfer.getData (format): Ta atribut v operaciji povleci in povleci, ki se uporablja za pridobivanje določenih podatkov. Če ni enakih podatkov kot je, se vrne v prazen niz

Sintaksa povleci in spusti v HTML

Tu je nekaj korakov, ki opredeljujejo skladnjo za povleci in spusti:

Izberite predmet, ki naj bo zanj privzet atribut povleci: nastavi.

Začnite vleči predmet:

function dragStart(ev)()

Izpustite predmet:

function dragDrop(ev)()

Primeri vlečenja in spuščanja v HTML

Naslednji primer bo pokazal, kako natančno bo delovanje HTML vleklo in spustilo v HTML:

Primer # 1

Koda:


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





Izhod: Pred možnostjo povleci in spusti bo izhod, kot je prikazano spodaj:

Po izvedbi operacije povleci in spusti bo:

Primer # 2

Tu bomo videli še en primer, v katerem bomo sliko premaknili z ene lokacije na drugo določeno mesto, kot je prikazano spodaj koda:

Koda:



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;
)



Demo povleci in spusti