Maison > interface Web > Tutoriel H5 > Explication détaillée des événements glisser-déposer (Drag and drop) en HTML5

Explication détaillée des événements glisser-déposer (Drag and drop) en HTML5

黄舟
Libérer: 2017-02-21 13:27:30
original
1466 Les gens l'ont consulté

Prise en charge des navigateurs

Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge le glisser-déposer.

Remarque : Le glisser-déposer n'est pas pris en charge dans Safari 5.1.2.

Exemple de glisser-déposer HTML5

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#p1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script type="text/javascript"> 
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> 
 
<p>请把 Aseoe logo的图片拖放到矩形中:p> 
 
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">p> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html>
Copier après la connexion



Définir l'élément comme déplaçable

Tout d'abord, pour rendre l'élément déplaçable, définissez l'attribut draggable sur true :

Que faire glisser - ondragstart et setData()

Ensuite, spécifie quoi se produit lorsqu'un élément est déplacé.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à glisser.

La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Copier après la connexion



Dans cet exemple, les données le type est "Texte" et la valeur est l'identifiant de l'élément déplaçable ("drag1").

Où placer - ondragover


L'événement ondragover spécifie où placer les données glissées.

Par défaut, les données/éléments ne peuvent pas être placés à l'intérieur d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément.

Ceci est placé en appelant la méthode event.preventDefault() de l'événement ondragover :

event.preventDefault()
Copier après la connexion



- ondrop


Lorsque les données déplacées sont placées, l'événement de dépôt se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Copier après la connexion



Explication du code :

Appelez PreventDefault() pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de l'ouvrir sous forme de lien)

Par dataTransfer.getData("Text ") Méthode pour obtenir les données déplacées. Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData().

Les données déplacées sont l'identifiant de l'élément déplacé ("drag1")

Ajouter l'élément déplacé à l'élément placé (élément cible)

Résumé

Ce qui précède est une explication détaillée des événements glisser-déposer (Drag and drop) en HTML5 Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois (www. php.cn) !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal