Trageți și plasați este o parte a standardului HTML5.
tragere (eveniment) "id =" drag1" alt = "w3ii"> Trageți w3ii imaginea în dreptunghiului.
Tragere și plasare
Trageți și plasați este o caracteristică foarte frecvente. Acesta este atunci când "grab" un obiect și trageți-o într - o altă locație.
În HTML5, prin tragere și plasare este o parte a standardului, precum și orice element poate fi draggable.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin Drag and Drop.
| API-ul | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4 | 9 | 3.5 | 6 | 12,0 |
Drag and Drop HTML Exemplu
Exemplul de mai jos este un simplu drag and drop exemplu:
Exemplu
<!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> Încearcă - l singur » S-ar putea părea complicat, dar permite accesul trece prin toate partile componente ale unui eveniment drag and drop.
Asigurați-un Element Draggable
În primul rând: Pentru a face un element draggable, setați draggable atributul la true :
<img draggable="true">Ce să Trageți - ondragstart și setData()
Apoi, specificați ce ar trebui să se întâmple atunci când elementul este tras.
În exemplul de mai sus, ondragstart atributul numește o funcție, drag(event) , care specifică ce date să fie tras.
dataTransfer. setData() dataTransfer. setData() metoda setează tipul de date și valoarea datelor tras:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
În acest caz, tipul de date este "text" , iar valoarea este id - ul elementului draggable ("drag1") .
În cazul în care Drop - ondragover
ondragover eveniment specifică în cazul în care datele pot fi trase scăzut.
În mod implicit, datele / elemente nu pot fi scăzut în alte elemente. Pentru a permite o picătură, trebuie să împiedice manipularea implicită a elementului.
Acest lucru se face prin apelarea event. preventDefault() event. preventDefault() metoda pentru ondragover eveniment:
event . preventDefault()
Face Drop - ondrop
În cazul în care datele târât este scăzut, are loc un eveniment de scădere.
În exemplul de mai sus, ondrop atributul numește o funcție, drop(event) :
function drop(ev)
{
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Cod explicat:
- Call preventDefault() pentru a preveni manipularea browser - ul implicit al datelor (default is open as link on drop) - (default is open as link on drop) de (default is open as link on drop)
- Ia datele tarat cu dataTransfer. getData() dataTransfer. getData() metoda. Această metodă va returna orice date care a fost setată la același tip în setData() metoda
- Datele tras este id - ul elementului tras ("drag1")
- Elementul Append târât în drop elementul
Mai multe exemple
Imagine Trageți înainte și înapoi
Cum se trage (and drop) o imagine înainte și înapoi între două <div> elemente.