Commentaire: Appelez EmptiserDefault () pour éviter le traitement par défaut des données par défaut par le navigateur (le comportement par défaut des événements de dépôt est ouvert sous forme de lien) et les données traînées sont obtenues via la méthode Datatransfer.getData (texte). Les amis intéressés peuvent y faire référence.
Effet d'origine
Effet après traîner
Le code est le suivant
[code]
<! Doctype html>
<html>
<adal>
<style type = "text / css">
# div1, # div2
{float: gauche; Largeur: 100px; hauteur: 35px; marge: 10px; rembourrage: 10px; bordure: 1px solide #aaaaa;}
</ style>
<script type = "text / javascript">
fonction pertedrop (ev)
{
ev.PreventDefault ();
}
Fonction traîner (EV)
{
ev.datatransfer.setData ("texte", ev.target.id);
}
Fonction Drop (EV)
{
ev.PreventDefault ();
var data = ev.datatransfer.getData ("texte");
ev.target.appendChild (document.getElementById (données));
}
</cript>
</ head>
<body>
<img src = "/ i / w3school_logo_black.gif" draggable = "true" ondragstart = "drag (événement)" />
<div ondrop = "drop (event)" ondragover = "allowdrop (event)">
</div>
<div ondrop = "drop (event)" ondragover = "allowdrop (event)"> </div>
</docy>
</html>
[/code]
Cela peut sembler un peu compliqué, mais nous pouvons étudier séparément les différentes parties de l'événement Drag and Drop.
Définir des éléments sur glisser-déposer
Tout d'abord, pour rendre l'élément Draggable, définissez la propriété Draggable sur true:
<img draggable = "true" />
Quoi faire glisser - Ondragstart et setData ()
Ensuite, spécifiez ce qui se passe lorsque l'élément est traîné.
Dans l'exemple ci-dessus, la propriété OnDragstart appelle une fonction, glisser (événement), qui spécifie les données glissées.
La méthode Datatransfer.setData () définit le type de données et la valeur des données traînées:
Fonction traîner (EV)
{
ev.datatransfer.setData ("texte", ev.target.id);
}
Dans cet exemple, le type de données est du texte et la valeur est l'ID de l'élément draggable (drag1).
Où mettre - Ondragover
L'événement Ondragover spécifie où placer des données glissées.
Par défaut, les données / éléments ne peuvent pas être placés dans d'autres éléments. Si vous devez définir le placement Autoriser, nous devons bloquer la gestion par défaut des éléments.
Cela se fait en appelant la méthode event.PreventDefault () de l'événement Ondragover:
event.preventDefault ()
Faire un placement - ONDROP
Un événement de dépôt se produit lorsque des données de dépôt sont placées.
Dans l'exemple ci-dessus, la propriété ONDROP appelle une fonction, Drop (événement):
Fonction Drop (EV)
{
ev.PreventDefault ();
var data = ev.datatransfer.getData ("texte");
ev.target.appendChild (document.getElementById (données));
}
Explication du code:
Appelez EmptiserDefault () pour éviter le traitement par défaut des données par défaut par le navigateur (le comportement par défaut des événements DROP est ouvert sous forme de liaison) pour obtenir les données traînées via la méthode Datatransfer.getData (texte). Cette méthode renvoie tout jeu de données sur le même type dans la méthode setData (). Les données traînées sont l'ID de l'élément traîné (Drag1) ajoute l'élément glissé vers l'élément de placement (élément cible)