HTML-i lohistamine - HTML-is lohistamise ja näitamise näide

• Sissejuhatus HTML-i lohistamisse
• 
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





Sissejuhatus HTML-i lohistamisse

Lohistamine on nüüd üks uusimaid HTML-i funktsioone. Lohistamine on protsess, mis algab siis, kui kasutaja valib lohistatava elemendi ja asetab selle elemendi kukutatavasse ossa ja asetab selle määratud kohta. See kasutab dokumendiobjekti mudeli (DOM) sündmusemudelit ja ka mõnda lohistamissündmust, mis tulenevad hiire sündmustest. See toimib kõige võimsama liidesena, mille ülesandeks on hiire abil elementide kopeerimine, salvestamine ja kustutamine. Uusimas HTML-is töötab funktsioon Lohistamine ja langus viimastel sündmustel, nagu näiteks dragstart, ja samamoodi lohistatakse palju muid sündmusi.

Sündmused lohistamiseks

Viimases pukseerimisfunktsioonis (dnd) on mitu sündmust, vaatame ükshaaval järgmiselt:

Vaatame mõnda andmeatribuuti, millel lohistamise toiming toimub:

1. dataTransfer.dropEffect (= väärtus): seda atribuuti kasutatakse praegu toimuva operatsiooni näitamiseks. saab selle juba valitud operatsiooni asendada. Selles sisalduvad väärtused nagu koopia, link, puudub või teisaldatakse.

2. dataTransfer.effectAllowed (= väärtus): olenemata operatsioonidest, mis selle atribuudi kaudu tagastatakse. Samuti on võimalik seadistada juba valitud toimingu muutmiseks.

3. dataTransfer.files: See andmeatribuut, mida kasutatakse lohistatavate failide faililoendi saamiseks.

4. dataTransfer.addElement (element): seda kasutatakse juba olemasoleva elemendi lisamiseks muude elementide loendisse, mis on kasulikud lohistamise tagasiside andmiseks.

5. dataTransfer.setDragImage (element, x, y): see atribuut on sama, mis ülalpool, lohistamise tagasiside värskendamiseks ja juba olemasoleva tagasiside muutmiseks

6. dataTransfer.clearData ((formaat)): see aitab kasutajal andmeid juba määratletud vormingust eemaldada. Kui kasutaja jättis argumendi välja, eemaldab IT kõik andmed.

7. dataTransfer.setData (vorming, andmed): see on üks populaarsemaid atribuute, mida kasutatakse määratletud andmete lisamiseks.

8. data = dataTransfer.getData (vorming): seda atribuuti lohistades ja lohistades kasutatakse määratletud andmete eraldamiseks. Juhul, kui puuduvad samad andmed nagu see, naaseb see tühja stringi

HTML-i lohistamise süntaks

Siin on mõned sammud pukseerimise süntaksi määratlemiseks:

Valige objekt, mida lohistada: määrake atribuut sellele tõeseks.

Alusta objekti lohistamist:

function dragStart(ev)()

Objekti kukutamine:

function dragDrop(ev)()

HTML-i lohistamise näited

Järgmine näide näitab, kuidas HTML-is täpselt lohistamistoiming toimib:

Näide nr 1

Kood:


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äljund: enne lohistamisvalikut väljund on järgmine:

Pärast lohistamise toimingut on väljund järgmine:

Näide 2

Siin näeme veel ühte näidet, kus teisaldame pildi ühest asukohast teise määratletud asukohta, nagu on näidatud allpool koodil:

Kood:



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



Kujutise lohistamine