Dra og slipp inn HTML - Eksempel for å utføre dra og slipp i HTML

• Introduksjon til Drag and Drop in 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





Introduksjon til Drag and Drop in HTML

Dra og slipp er nå en av de nyeste funksjonene som er inkludert i HTML. Dra og slipp er en prosess som starter når brukeren velger et drabar element og plasserer dette elementet i den droppbare komponenten og plasserer det på det angitte stedet. Den bruker hendelsesmodellen Document Object Model (DOM) i tillegg til noen drahendelser som kommer fra mushendelser. Det fungerer som det kraftigste grensesnittet som er ansvarlig for å kopiere, registrere, slette elementer ved å bruke en mus. I den siste HTML-funksjonen fungerer Drag and Drop-funksjonalitet på de siste hendelsene som dragstart, draend som de mange andre hendelser kommer til å bli brukt.

Arrangementer for dra og slipp

Det er flere hendelser inkludert i den siste dra og slipp (dnd) funksjonaliteten. La oss se en etter en som følger:

La oss se noen dataattributter som Dra og slipp-operasjonen kommer til å skje:

1. dataTransfer.dropEffect (= verdi): Denne attributtet brukes til å vise hvilken operasjon som pågår. man kan stille den til å erstatte den allerede valgte operasjonen. Verdiene som er inkludert i den som en kopi, lenke, ingen eller flytte.

2. dataTransfer.effectAllowed (= verdi): Hvilke operasjoner som er tillatt som vil bli returnert gjennom denne attributtet. Det er også mulig å stille inn for å endre allerede valgt operasjon.

3. dataTransfer.files: Denne dataattributtet som brukes til å få filliste over filene som skal dras.

4. dataTransfer.addElement (element): Det brukes til å sette inn det allerede eksisterende elementet i en liste over andre elementer som er nyttige for å gi tilbakemelding fra dra.

5. dataTransfer.setDragImage (element, x, y): Dette attributtet er lite det samme som ovenfor for å oppdatere tilbakemeldinger fra dra og bidra til å endre allerede eksisterende tilbakemelding

6. dataTransfer.clearData ((format)): Det hjelper brukeren med å fjerne data fra det allerede definerte formatet. Hvis brukeren unnlot argumentet, vil IT fjerne alle dataene.

7. dataTransfer.setData (format, data): Det er en av de populære attributtene som brukes til å legge til spesifiserte data.

8. data = dataTransfer.getData (format): Dette attributtet i dra og dra-operasjonen som brukes til å trekke ut spesifiserte data. Hvis det ikke er samme data som det, vil de gå tilbake til den tomme strengen

Syntaks for dra og slipp i HTML

Her er noen trinn som definerer syntaks for dra og slipp:

Velg objektet som skal være et drag: set attributt som er sant for det.

Begynn å dra objekt:

function dragStart(ev)()

Slipp objektet:

function dragDrop(ev)()

Eksempler på dra og slipp i HTML

Følgende eksempel viser hvordan nøyaktig dra og slipp-operasjonen vil utføre 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





Utgang: Før dra og slipp vil utdata være som vist nedenfor:

Etter utførelse av dra og slipp vil utdataene være som:

Eksempel 2

Her skal vi se et annet eksempel der vi vil flytte bildet fra ett sted til et annet spesifisert 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;
)



Demo og slipp av bilde