Commentaire: Avant HTML5, pour implémenter les opérations de glisser-déposer des éléments de page Web, il était nécessaire de compter sur Mousedown, Mousemove, Mouseup et d'autres API pour les implémenter via une grande quantité de code JS. Désormais, HTML5 simplifie considérablement la difficulté des opérations de glisser-déposer des éléments de la page Web. En plus de prendre en charge la traînée et la goutte d'éléments à l'intérieur du navigateur, l'API prend également en charge la glissement des données entre le navigateur et d'autres applications.
Avant HTML5, pour implémenter les opérations de glisser-déposer des éléments de page Web, nous devons compter sur Mousedown, Mousemove, Mouseup et d'autres API pour les implémenter via une grande quantité de code JS; HTML5 présente une API qui prend directement en charge les opérations de glisser-déposer, ce qui simplifie considérablement la difficulté de programmation des opérations de traînée et de dépôt des éléments de page Web. En plus de prendre en charge la traînée et la goutte d'éléments à l'intérieur du navigateur, ces API prennent également en charge la traînée des données entre le navigateur et d'autres applications.
Cet article utilise un exemple simple pour montrer comment utiliser les API de glisser-déposer dans HTML5.
Scène:
Comme indiqué dans la figure ci-dessous, nous voulons implémenter:
Faites glisser la photo de la zone de l'album gauche vers la zone de poubelle droite en traînant et en tombant; Pendant le processus de traînée, la pièce de rappel chaud doit être rappelée rapidement et l'opération de traînée et de dépôt est actuellement en cours;
Méthode d'implémentation:
Comme indiqué dans l'interface ci-dessus, le code HTML est relativement simple, comme suit:
<! Doctype html>
<html>
<adal>
<Title> HTML5 implémente l'opération de glisser-déposer </TITAL>
<meta charset = "utf-8" />
<style>
.album
{
Border: 3px en pointillé #ccc;
flottant: à gauche;
marge: 10px;
Min-Height: 100px;
rembourrage: 10px;
Largeur: 220px;
}
</ style>
</ head>
<corps ">
<div>
<h2> Rappel chaud: vous pouvez faire glisser les photos directement dans la poubelle peut </h2>
</div>
<div>
<h2> album </h2>
<img draggable = "true" src = "img / bg_01.png" />
<img draggable = "true" src = "img / bg_02.png" />
<img draggable = "true" src = "img / bg_03.png" />
</div>
<div>
<h2> poubelle peut </h2>
</div>
<br/>
</docy>
</html>
Remarque: Si vous souhaitez implémenter les opérations de glisser-déposer, vous devez ajouter DragGable = True Attribut aux éléments à traîner et à abandonner;
Ensuite, ajoutez le code JS suivant à l'événement Onload. Les commentaires sont plus détaillés et ne seront pas expliqués séparément.
<cript>
fonction init () {
var info = document.getElementById ("info");
// Obtenez les éléments de glisser-déposer. Cet exemple est le div où se trouve l'album.
var src = document.getElementById ("album");
// Démarrer l'opération de glissement et de dépôt
src.ondragstart = fonction (e) {
// Obtenez l'ID de photo de glisser-déposer
var dragImgid = e.target.id;
// Sortez l'élément traîné
var dragimg = document.getElementById (dragimgid);
// L'opération de traînée et de dépôt se termine
dragimg.ondragend = fonction (e) {
// récupérer le message de rappel
info.innerhtml = "<h2> Rappel créatif: vous pouvez faire glisser les photos directement dans la poubelle peut </h2>";
};
e.datatransfer.setData ("texte", dragimgid);
};
// Processus de glisser-déposer
src.ondRag = fonction (e) {
info.innerhtml = "<h2> - La photo est en cours de glissement - </h2>";
}
// Obtenez un élément cible glisser-déposer
var cible = document.getElementById ("trash");
// Fermez le traitement par défaut;
Target.ondrAsenter = fonction (e) {
E.PreventDefault ();
}
Target.ondRagover = fonction (e) {
E.PreventDefault ();
}
// quelque chose se traîne et tombe vers l'élément cible
Target.ondrop = fonction (e) {
var drawged = e.datatransfer.getData ("texte");
// Obtenez l'objet DOM dans l'album
var oldelem = document.getElementById (draggedId);
// supprime le nœud de la photo de l'album div
Oldelem.parentnode.removechild (Oldelem);
// Ajouter le nœud photo Dom traîné à la DIV Trash;
Target.ApendChild (Oldelem);
info.innerhtml = "<h2> Rappel créatif: vous pouvez faire glisser les photos directement dans la poubelle peut </h2>";
E.PreventDefault ();
}
}
</cript>
Réalisez l'effet: