Guide HTML5 - 3. Comment implémenter la fonction de glisser-déposer de l'élément HTML

Auteur：Eve Cole Date de mise à jour：2025-04-12 09:48:02

Le contenu de cet article concerne la façon d'implémenter la fonction de glissement de l'élément HTML dans HTML5 / "> HTML5. Pour implémenter le glisser-déposer avant HTML5, vous devez utiliser JS. Maintenant, HTML5 prend en charge la fonction de glisser-déposer en interne, mais pour implémenter des fonctions légèrement plus complexes, JS est indispensable. Regardons quelques exemples ci-dessous.

1. Créez un objet Drag

Nous pouvons dire au navigateur via l'attribut draggable dont les éléments doivent implémenter la fonction de glisser-déposer. Draggable a trois valeurs: true: l'élément peut être traîné; false: l'élément ne peut pas être traîné; Auto: le navigateur détermine si l'élément peut être traîné seul.

La valeur par défaut du système est auto, mais le navigateur prend en charge différentes fonctions de glisser-déposer de différents éléments dans le cas de l'auto, tels que: il prend en charge les objets IMG, mais ne prend pas en charge les objets div. Donc, si vous avez besoin de faire glisser un élément, il est préférable de définir Draggale sur true. Regardons un exemple ci-dessous:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

#src> *

{

flottant: à gauche;

}

#Target, #src> img

{

Border: mince noir massif;

rembourrage: 2px;

marge: 4px;

}

#cible

{

hauteur: 123px;

Largeur: 220px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

#target> img

{

marge: 1px;

}

</ style>

</ head>

<body>

Déposez ici </p>

</div>

<cript>

var src = document.getElementById ("src");

var cible = document.getElementById ("Target");

</cript>

</docy>

</html>

Effet de course:

2. Gérer les événements de glisser-déposer

Comprenons maintenant les événements liés à la traînée. Il existe deux types d'événements, l'un est l'événement de l'objet Drag, et l'autre est l'événement de la zone de chute. Les événements de glisser incluent: dragstart: déclenché lorsque l'élément glisser commence; glisser: déclenché pendant l'élément glisser; traîner: déclenché lorsque l'élément glisser se termine. Prenons un exemple ci-dessous:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

#src> *

{

flottant: à gauche;

}

#Target, #src> img

{

Border: mince noir massif;

rembourrage: 2px;

marge: 4px;

}

#cible

{

hauteur: 123px;

Largeur: 220px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

#target> img

{

marge: 1px;

}

IMG.Dragged

{

Color en arrière-plan: orange;

}

</ style>

</ head>

<body>

Déposez ici </p>

</div>

<cript>

var src = document.getElementById ("src");

var cible = document.getElementById ("Target");

var msg = document.getElementById ("msg");

src.ondragstart = fonction (e) {

e.target.classList.add ("glisser");

}

src.ondRagend = function (e) {

e.target.classList.Remove ("Dragged");

msg.innerhtml = "Drop ici";

}

src.ondRag = fonction (e) {

msg.innerhtml = e.target.id;

}

</cript>

</docy>

</html>

Effet de course:

3. Créez une zone de livraison

Regardons les événements liés à la zone de livraison: DragEnter: déclenché lorsque l'objet Drag entre dans la zone de livraison; Dragover: déclenché lorsque l'objet Drag se déplace dans la zone de livraison; DragLeave: l'objet de traînée n'est pas livré à la zone de livraison et déclenché lorsqu'il quitte la zone de livraison; Drop: déclenché lorsque l'objet Drag est placé dans la zone de livraison.

Jetons un coup d'œil à un exemple:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

#src> *

{

flottant: à gauche;

}

#Target, #src> img

{

Border: mince noir massif;

rembourrage: 2px;

marge: 4px;

}

#cible

{

hauteur: 123px;

Largeur: 220px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

#target> img

{

marge: 1px;

}

IMG.Dragged

{

Color d'arrière-plan: Lightgrey;

}

</ style>

</ head>

<body>

Déposez ici </p>

</div>

<cript>

var src = document.getElementById ("src");

var cible = document.getElementById ("Target");

var msg = document.getElementById ("msg");

var draggedID;

Target.ondrAsenter = mandeledRag;

Target.ondRagover = mandeledRag;

fonction managedRag (e) {

E.PreventDefault ();

}

Target.ondrop = fonction (e) {

var newelem = document.getElementById (dragged) .clonenode (false);

cible.innerhtml = "";

Target.ApendChild (Newelem);

E.PreventDefault ();

}

src.ondragstart = fonction (e) {

drawged = e.target.id;

e.target.classList.add ("glisser");

}

src.ondRagend = function (e) {

var elems = document.QuerySelectorAll (". Dragged");

pour (var i = 0; i <elems.length; i ++) {

elems [i] .classList.Remove ("Dragged");

}

</cript>

</docy>

</html>

Résultats en cours:

4. Utilisez DataTransfer

Nous utilisons DataTransfer pour transmettre des données des objets glisser vers la zone de livraison. DataTransfer a les propriétés et méthodes suivantes: Types: Renvoie le format des données; getData (<format>): renvoie les données de format spécifié; setData (<Format>, <sata>): définit les données de format spécifié; ClearData (<format>): supprime les données de format spécifié; Fichiers: renvoie le tableau de fichiers qui a été livré.

Examinons l'exemple suivant, l'effet qu'il a obtenu est le même que l'exemple 3:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

#src> *

{

flottant: à gauche;

}

#src> img

{

Border: mince noir massif;

rembourrage: 2px;

marge: 4px;

}

#cible

{

Border: mince noir massif;

marge: 4px;

}

#cible

{

hauteur: 123px;

Largeur: 220px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

IMG.Dragged

{

Color en arrière-plan: orange;

}

</ style>

</ head>

<body>

Déposez ici </p>

</div>

<cript>

var src = document.getElementById ("src");

var cible = document.getElementById ("Target");

Target.ondrAsenter = mandeledRag;

Target.ondRagover = mandeledRag;

fonction managedRag (e) {

E.PreventDefault ();

}

Target.ondrop = fonction (e) {

var droppeDID = e.datatransfer.getData ("texte");

var newelem = document.getElementById (DroppeDID) .clonenode (false);

cible.innerhtml = "";

Target.ApendChild (Newelem);

E.PreventDefault ();

}

src.ondragstart = fonction (e) {

e.datatransfer.setData ("texte", e.target.id);

e.target.classList.add ("glisser");

}

src.ondRagend = function (e) {

var elems = document.QuerySelectorAll (". Dragged");

pour (var i = 0; i <elems.length; i ++) {

elems [i] .classList.Remove ("Dragged");

}

</cript>

</docy>

</html>

5. Faites glisser et déposez le fichier

HTML5 prend en charge l'API Fichier, qui nous permet de manipuler les fichiers locaux. Généralement, nous n'utilisons pas directement l'API de fichier. Nous pouvons l'utiliser en combinaison avec d'autres fonctionnalités, telles que la combinaison des effets de glisser et de chute, comme indiqué dans l'exemple suivant:

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

corps> *

{

flottant: à gauche;

}

#cible

{

Border: moyen double noir;

marge: 4px;

hauteur: 75px;

Largeur: 200px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

tableau

{

marge: 4px;

Border-Collapse: s'effondrer;

}

th, td

{

rembourrage: 4px;

}

</ style>

</ head>

<body>

Déposez les fichiers ici </p>

</div>

</ table>

<cript>

var cible = document.getElementById ("Target");

Target.ondrAsenter = mandeledRag;

Target.ondRagover = mandeledRag;

fonction managedRag (e) {

E.PreventDefault ();

}

Target.ondrop = fonction (e) {

var fichiers = e.datatransfer.files;

var tablelem = document.getElementById ("data");

TableElem.InnerHtml = "<Tr> <th> Nom </ Th> <th> Type </ Th> <th> Size </th> </tr>";

pour (var i = 0; i <files.length; i ++) {

var row = "<tr> <td>" + fichiers [i] .name + "</td> <td>" + fichiers [i] .type + "</td> <td>" + fichiers [i] .size + "</td> </tr>";

TableElem.InnerHtml + = Row;

}

E.PreventDefault ();

}

</cript>

</docy>

</html>

DataTransfer renvoie un objet FileList, que nous pouvons traiter comme un objet de tableau de fichiers, et le fichier contient les propriétés suivantes: Nom: Nom du fichier; Type: type de fichier (type MIME); Taille: taille du fichier.

Effet de course:

6. Télécharger des fichiers

Ce qui suit est un exemple de téléchargement de fichiers en faisant glisser et en supprimant Ajax.

<! Doctype html>

<html>

<adal>

<Title> Exemple </TITME>

<style>

.tableau

{

Affichage: table;

}

.rangée

{

Affichage: rang de table;

}

.cellule

{

Affichage: cellule de table;

rembourrage: 5px;

}

.étiquette

{

Texte-aligne: à droite;

}

#cible

{

Border: moyen double noir;

marge: 4px;

hauteur: 50px;

Largeur: 200px;

Texte-aligne: Centre;

Affichage: table;

}

#target> p

{

Affichage: cellule de table;

Adigne vertical: milieu;

}

</ style>

</ head>

<body>

<div>

Bananes: </div>

<div>

</div>

<div>

Pommes: </div>

<div>

</div>

<div>

Cherries: </div>

<div>

</div>

<div>

Fichier: </div>

<div>

</div>

<div>

Total: </div>

éléments </div>

</div>

Déposez les fichiers ici </p>

</div>

Soumettre le formulaire </frut

</ form>

var cible = document.getElementById ("Target");

var httprequest;

var FileList;

Target.ondrAsenter = mandeledRag;

Target.ondRagover = mandeledRag;

fonction managedRag (e) {

E.PreventDefault ();

}

Target.ondrop = fonction (e) {

FileList = E.Datatransfer.Files;

E.PreventDefault ();

}

document.getElementById ("Soumider"). onClick = Function GrowbuttonPress (e) {

E.PreventDefault ();

var form = document.getElementById ("FruitForm");

var formdata = new formData (form);

if (fileList) {

pour (var i = 0; i <fileList.length; i ++) {

formdata.append ("fichier" + i, fileList [i]);

}

httpRequest = new xmlHttpRequest ();

httpRequest.OnreadyStateChange = HandleResponse;

httprequest.open ("post", form.action);

httprequest.send (formdata);

}

Fonction HandleResponse () {

if (httprequest.readystate == 4 && httprequest.status == 200) {

var data = JSON.Parse (httpRequest.ResponSeText);

document.getElementById ("Résultats"). innerHTML = "You Ordor" + data.total + "items";

}

</cript>

</docy>

</html>

Effet:

Certains des exemples ci-dessus peuvent avoir des effets de fonctionnement différents de navigateurs. J'utilise un navigateur Chrome. À l'exception des exemples 5 et 6 qui ne prennent pas en charge plusieurs fichiers, d'autres exemples s'exécutent normalement. Vous pouvez télécharger la démo.

Adresse de téléchargement de démo: html5guide.draggable.rar