Slepen en neerzetten in HTML - Voorbeeld om slepen en neerzetten in HTML uit te voeren

Inleiding tot slepen en neerzetten in HTML

Drag and Drop zijn nu een van de nieuwste functies in HTML. Slepen en neerzetten is een proces dat start wanneer de gebruiker een sleepbaar element kiest en dit element in de uitwerpbare component plaatst en op de opgegeven locatie plaatst. Het maakt gebruik van het DOM-gebeurtenismodel (Document Object Model) en enkele sleepgebeurtenissen die afkomstig zijn van muisgebeurtenissen. Het werkt als de krachtigste interface die verantwoordelijk is voor het kopiëren, opnemen en verwijderen van elementen met behulp van een muis. In de nieuwste HTML werkt Drag and Drop-functionaliteit op de nieuwste evenementen zoals dragstart, zoals dragend en vele andere evenementen zullen worden gebruikt.

Evenementen voor slepen en neerzetten

Er zijn meerdere evenementen opgenomen in de nieuwste drag and drop (dnd) -functionaliteit, laten we een voor een als volgt zien:

Laten we enkele gegevensattributen bekijken waarop de bewerking Slepen en neerzetten gaat gebeuren:

1. dataTransfer.dropEffect (= waarde): dit kenmerk wordt gebruikt om aan te geven welke bewerking momenteel wordt uitgevoerd. men kan het instellen om de reeds geselecteerde bewerking te vervangen. De daarin opgenomen waarden zoals een kopie, link, geen of verplaatsing.

2. dataTransfer.effectAllowed (= value): welke bewerkingen zijn toegestaan ​​die via dit kenmerk worden geretourneerd. Het is ook mogelijk om een ​​reeds geselecteerde bewerking in te stellen.

3. dataTransfer.files: dit gegevenskenmerk wordt gebruikt om fileList te krijgen van de bestanden die zullen worden gesleept.

4. dataTransfer.addElement (element): het wordt gebruikt om het reeds bestaande element in een lijst met andere elementen in te voegen die nuttig zijn om de sleepfeedback te maken.

5. dataTransfer.setDragImage (element, x, y): dit kenmerk is een beetje hetzelfde als hierboven voor het bijwerken van sleepfeedback en hulp bij het wijzigen van reeds bestaande feedback

6. dataTransfer.clearData ((formaat)): het helpt de gebruiker om gegevens uit het reeds gedefinieerde formaat te verwijderen. Als de gebruiker het argument heeft weggelaten, verwijdert de IT alle gegevens.

7. dataTransfer.setData (formaat, gegevens): het is een van de populaire kenmerken die worden gebruikt om specifieke gegevens toe te voegen.

8. data = dataTransfer.getData (format): dit kenmerk in Drag and Drag-bewerking dat wordt gebruikt om specifieke gegevens te extraheren . Als er geen soortgelijke gegevens zijn, wordt deze teruggezet naar de lege tekenreeks

Syntaxis van slepen en neerzetten in HTML

Hier zijn enkele stappen die de syntaxis definiëren voor slepen en neerzetten:

Selecteer het object dat u wilt slepen: stel het kenmerk waar aan vast.

Begin met het slepen van object:

function dragStart(ev)()

Zet het object neer:

function dragDrop(ev)()

Voorbeelden van slepen en neerzetten in HTML

In het volgende voorbeeld wordt getoond hoe de bewerking met slepen en neerzetten precies werkt in HTML:

Voorbeeld 1

Code:


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





Uitvoer: Voordat de optie voor slepen en neerzetten wordt uitgevoerd, is de uitvoer zoals hieronder weergegeven:

Na het uitvoeren van de Drag and Drop-bewerking zal de uitvoer zijn als:

Voorbeeld 2

Hier gaan we een ander voorbeeld zien waarin we de afbeelding van de ene locatie naar een andere gespecificeerde locatie zullen verplaatsen, zoals hieronder wordt weergegeven:

Code:



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



Image Drag and Drop Demo