Træk og slip HTML - Eksempel til udførelse af træk og slip i HTML

• Introduktion til træk og slip i 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





Introduktion til træk og slip i HTML

Træk og slip er nu en af ​​de nyeste funktioner inkluderet i HTML. Træk og slip er en proces, der starter, når brugeren vælger et trækbart element og placerer dette element i den droppbare komponent og placerer det på det specificerede sted. Den bruger dokumentobjektmodellen (DOM) begivenhedsmodel såvel som nogle trækbegivenheder, der kommer fra musebegivenheder. Det fungerer som den mest kraftfulde grænseflade, der er ansvarlig for at kopiere, registrere, slette elementer ved hjælp af en mus. I den nyeste HTML fungerer Drag and Drop-funktionalitet på de seneste begivenheder som dragstart, træk som dem, mange andre begivenheder vil blive brugt.

Begivenheder til træk og slip

Der er flere begivenheder inkluderet i den nyeste træk og slip (dnd) -funktionalitet, lad os se en efter en som følger:

Lad os se nogle dataattributter, som træk og slip-operation vil ske:

1. dataTransfer.dropEffect (= værdi): Denne attribut bruges til at vise, hvilken operation der i øjeblikket foregår. man kan indstille det til at erstatte den allerede valgte handling. Værdierne inkluderet i det som en kopi, link, ingen eller flytning.

2. dataTransfer.effectAllowed (= værdi): Hvilke handlinger der er tilladt, der returneres gennem denne attribut. Det er også muligt at indstille til at ændre allerede valgt operation.

3. dataTransfer.files: Denne dataattribut, der bruges til at få filListe over de filer, der skal trækkes.

4. dataTransfer.addElement (element): Det bruges til at indsætte det allerede eksisterende element i en liste over andre elementer, der er nyttige til at give træk feedback.

5. dataTransfer.setDragImage (element, x, y): Denne attribut lidt den samme som ovenfor til opdatering af træk feedback og hjælp til at ændre allerede eksisterende feedback

6. dataTransfer.clearData ((format)): Det hjælper brugeren med at fjerne data fra det allerede definerede format. Hvis brugeren udelade argumentet, fjerner IT alle dataene.

7. dataTransfer.setData (format, data): Det er en af ​​de populære attributter, der bruges til at tilføje specificerede data.

8. data = dataTransfer.getData (format): Denne attribut i træk og træk-funktion, der bruges til at udtrække specificerede data. Hvis der ikke er samme data som det, vender de tilbage til den tomme streng

Syntaks for træk og slip i HTML

Her er nogle få trin til at definere syntaks for træk og slip:

Vælg det objekt, der skal være et træk: sæt attribut sande til det.

Begynd at trække objekt:

function dragStart(ev)()

Slip objektet:

function dragDrop(ev)()

Eksempler på træk og slip i HTML

Følgende eksempel viser, hvordan nøjagtigt træk og slip-operation vil fungere i HTML:

Eksempel 1

Kode:


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





Output: Før træk og slip er output som vist nedenfor:

Efter udførelse af træk og slip vil operationen være som:

Eksempel 2

Her skal vi se et andet eksempel, hvor vi flytter billedet fra et sted til et andet specificeret sted som vist under kode:

Kode:



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



Billedtræk og slip Demo