Glisser-déposer est une partie de la norme HTML5.
Faites glisser l'image ci-dessus dans le rectangle.
en HTML
Le cahier des charges de travail HTML5 projet inclut le support pour drag & drop. HTML5 prend en charge différents types de glisser-déposer entre autres:
- textes de glisser-déposer et les codes HTML
- Glisser-déposer des éléments HTML
- Faites glisser et déposer des fichiers
Sur la base des actions nécessaires, l'un des types ci-dessus peuvent être utilisés. Notez que lorsqu'un élément HTML est entraîné pour déplacer sa position actuelle, son ID est envoyé à l'élément parent de destination; il envoie un texte et peut être considéré comme le premier groupe.
L'application e-mail Web de Google Gmail supporte le glisser-déposer des images et des pièces jointes dans le dernier navigateur Google Chrome et Safari (5.x) d'Apple. Et la recherche Google image supporte le glisser-déposer.
Glisser déposer
Glisser-déposer est une caractéristique très courante. Il est quand vous "grab" un objet et faites -le glisser vers un autre emplacement.
En HTML5, le glisser-déposer fait partie de la norme, et tout élément peut être draggable.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement glisser-déposer.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12,0 |
HTML glisser-déposer Exemple
L'exemple ci-dessous est un simple glisser-déposer par exemple:
Exemple
<!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> Essayez vous - même » Il peut sembler compliqué, mais permet de passer par toutes les différentes parties d'un événement glisser-déposer.
Faire un élément Draggable
Tout d' abord: Pour un élément draggable, définissez l' draggable attribut true :
<img draggable="true">
Que Faire glisser - ondragstart et setData()
Ensuite, préciser ce qui devrait se produire lorsque l'élément est traîné.
Dans l'exemple ci - dessus, l' ondragstart attribut appelle une fonction, drag(event) , qui spécifie ce qu'il faut faire glisser des données.
Le dataTransfer. setData() dataTransfer. setData() méthode définit le type de données et la valeur des données traîné:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
Dans ce cas, le type de données est "text" et la valeur est l'identifiant de l'élément draggable ("drag1") le ("drag1") .
Où déposer - ondragover
Le ondragover événement spécifie où les données glissés peuvent être déposés.
Par défaut, les données / éléments ne peuvent pas être déposés dans d'autres éléments. Pour permettre une baisse, il faut éviter la manipulation par défaut de l'élément.
Cela se fait en appelant l' event. preventDefault() event. preventDefault() Procédé pour la ondragover événement:
event . preventDefault()
Faites le Drop - ondrop
Lorsque les données glissé est déposé, un événement de chute se produit.
Dans l'exemple ci - dessus, l' ondrop attribut appelle une fonction, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Code explique:
- Appelez preventDefault() pour éviter la manipulation par défaut du navigateur des données (default is open as link on drop) par (default is open as link on drop)
- Obtenir les données glissées avec le dataTransfer. getData() dataTransfer. getData() méthode. Cette méthode renvoie toutes les données qui ont été définies au même type dans le setData() méthode
- Les données traîné est l'identifiant de l'élément traîné ("drag1")
- Append l'élément entraîné dans la drop élément
Drag l' image d' avant en arrière
Comment faire glisser (and drop) une image et - vient entre deux <div> éléments.