Vedä ja pudota HTML - Esimerkki vetämällä ja pudottamalla HTML-muodossa

• Johdatus HTML: n vetämiseen ja pudottamiseen
• 
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





Johdatus HTML: n vetämiseen ja pudottamiseen

Vedä ja pudota ovat nyt yksi viimeisimmistä HTML-ominaisuuksista. Vedä ja pudota on prosessi, joka alkaa, kun käyttäjä valitsee vedettävän elementin ja sijoittaa tämän elementin pudotettavissa olevaan komponenttiin ja sijoittaa sen määritettyyn sijaintiin. Se käyttää DOM (Document Object Model) -tapahtumamallia samoin kuin joitain hiiri-tapahtumista peräisin olevia vetotapahtumia. Se toimii tehokkaimpana käyttöliittymänä, jonka tehtävänä on kopioida, tallentaa ja poistaa elementtejä hiiren avulla. Uusimmassa HTML-muodossa Vedä ja pudota -toiminnot toimivat viimeisimmissä tapahtumissa, kuten dragstart, draged kuten ne, monia muita tapahtumia aiotaan käyttää.

Tapahtumat vetämällä ja pudottamalla

Viimeisimmässä vedä ja pudota -toiminnossa (dnd) on useita tapahtumia, katsokaamme yksi kerrallaan seuraavasti:

Katsotaan joitain tietoominaisuuksia, joihin Vedä ja pudota -toiminto tapahtuu:

1. dataTransfer.dropEffect (= arvo): Tätä ominaisuutta käytetään osoittamaan, mikä operaatio parhaillaan tapahtuu. voidaan asettaa se korvaamaan jo valittu toiminto. Siihen sisältyvät arvot, kuten kopio, linkki, ei mitään tai siirrä.

2. dataTransfer.effectAllowed (= arvo): Valitut toiminnot sallitaan, jotka palautetaan tämän määritteen kautta. On myös mahdollista asettaa jo valitun toiminnan muuttamiseen.

3. dataTransfer.files: Tämä dataominaisuus, jota käytetään hakemaan vedettävien tiedostojen fileList.

4. dataTransfer.addElement (elementti): Sitä käytetään lisätä jo olemassa elementti luettelon muita elementtejä, jotka ovat hyödyllisiä tekemiseksi vetää palautetta.

5. dataTransfer.setDragImage (elementti, x, y): Tämä ominaisuus on hiukan sama kuin yllä päivityksen vetämispalautteen päivittämiseksi ja auttaa muuttamaan jo olemassa olevaa palautetta

6. dataTransfer.clearData ((muoto)): Se auttaa käyttäjää poistamaan tietoja jo määritellystä muodosta. Jos käyttäjä jättää väitteen pois, IT poistaa kaikki tiedot.

7. dataTransfer.setData (muoto, data): Se on yksi suosituimmista määritteistä, jota käytetään määritetyn tiedon lisäämiseen.

8. data = dataTransfer.getData (muoto): Tätä ominaisuutta Drag and Drag -toiminnossa käytetään määritetyn datan purkamiseen . Jos ei ole samanlaista tietoa kuin se, se palaa tyhjään merkkijonoon

Vedä ja pudota -syntaksi HTML-muodossa

Tässä on muutama vaihe määrittelemällä vetämisen ja pudottamisen syntaksi:

Valitse objekti vetämäksi: aseta attribuutti totta siihen.

Aloita objektin vetäminen:

function dragStart(ev)()

Pudota esine:

function dragDrop(ev)()

Esimerkkejä HTML: n vetämisestä ja pudottamisesta

Seuraava esimerkki näyttää kuinka tarkkaan vetämisoperaatio toimii HTML: ssä:

Esimerkki # 1

Koodi:


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





Tulos: Ennen kuin vedä ja pudota -vaihtoehto, lähtö on seuraavan kuvan mukainen:

Vedä ja pudota -toiminnan suorittamisen jälkeen lähtö on seuraava:

Esimerkki 2

Täällä näemme toisen esimerkin, jossa siirrämme kuvan paikasta toiseen määriteltyyn sijaintiin alla olevan koodin osoittamalla tavalla:

Koodi:



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



Kuvan vedä ja pudota -esittely