HTML Sleep en Drop API
In HTML kan enige element gesleep en laat val word.
Voorbeeld
Sleep die W3Schools-prent in die reghoek.
Sleep en los
Sleep en los is 'n baie algemene kenmerk. Dit is wanneer jy 'n voorwerp "gryp" en dit na 'n ander plek sleep.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat Sleep en Los ten volle ondersteun.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Sleep en Drop Voorbeeld
Die voorbeeld hieronder is 'n eenvoudige sleep-en-los voorbeeld:
Voorbeeld
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Dit lyk dalk ingewikkeld, maar kom ons gaan deur al die verskillende dele van 'n sleep-en-los gebeurtenis.
Maak 'n element sleepbaar
Eerstens: Om 'n element sleepbaar te maak, stel die draggableeienskap op waar:
<img draggable="true">
Wat om te sleep - ondragstart en setData()
Spesifiseer dan wat moet gebeur wanneer die element gesleep word.
In die voorbeeld hierbo ondragstartroep die kenmerk 'n funksie, sleep(gebeurtenis), wat spesifiseer watter data gesleep moet word.
Die dataTransfer.setData()metode stel die datatipe en die waarde van die gesleep data:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In hierdie geval is die datatipe "teks" en die waarde is die id van die sleepbare element ("drag1").
Waar om te laat val - ondragover
Die ondragovergebeurtenis spesifiseer waar die gesleep data laat val kan word.
By verstek kan data/elemente nie in ander elemente weggegooi word nie. Om 'n daling toe te laat, moet ons die verstek hantering van die element verhoed.
Dit word gedoen deur die event.preventDefault()metode vir die ondragover-gebeurtenis aan te roep:
event.preventDefault()
Doen die Drop - ondrop
Wanneer die gesleepde data laat val word, vind 'n drop-gebeurtenis plaas.
In die voorbeeld hierbo roep die ondrop-kenmerk 'n funksie, drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kode verduidelik:
- Roep preventDefault() om te verhoed dat die blaaier verstek hantering van die data (verstek is oop as skakel by drop)
- Kry die gesleep data met die dataTransfer.getData() metode. Hierdie metode sal enige data terugstuur wat op dieselfde tipe in die setData()-metode gestel is
- Die gesleep data is die ID van die gesleep element ("drag1")
- Voeg die gesleep element by die drop element
Meer voorbeelde
Voorbeeld
Hoe om 'n prent heen en weer tussen twee <div>-elemente te sleep (en te laat val):