HTML5 glisser-déposer

à partir de HTML5 il est possible de glisser-déposer des éléments HTML à l’intérieur d’une page HTML. Via les écouteurs D’événements JavaScript, vous pouvez décider ce qui se passe lorsque l’utilisateur fait glisser et supprime des éléments.

au Cours de glisser et déposer des éléments HTML peut avoir deux rôles:

1. Déplaçable
2. cible / zone de dépôt.

l’élément déplaçable est l’élément que l’utilisateur doit pouvoir faire glisser autour de la page HTML et déposer quelque part, pour qu’une action se produise. Cela peut être un ou plusieurs éléments.,

la cible de dépôt ou la zone de dépôt est l’élément sur lequel les éléments déplaçables sont déposés.

événements glisser-déposer

pour contrôler ce qui se passe lors du glisser-déposer d’éléments HTML, vous devez effectuer 3 étapes:

1. définissez les éléments HTML sur draggable.,
2. attacher des écouteurs d’événement aux éléments HTML déplaçables
3. attacher des écouteurs d’événement aux éléments HTML cibles de dépôt

les événements et les attributs sont illustrés ici:

Vous devez d’abord définir l’attributdraggable="true" sur les éléments HTML

Deuxièmement, vous fixez les écouteurs d’événement sur l’élément déplaçable pour le dragstart et dragend événements., Dans ces écouteurs d’événement, vous pouvez implémenter ce qui doit se passer lorsque l’utilisateur commence à faire glisser l’élément et lorsque le glissement se termine.

Troisièmement, vous attachez des écouteurs d’événement sur l’élément drop target. Les événements que vous pouvez écouter sont dragenter, dragover, dragleave et drop.

Le dragenter événement est déclenché lorsque l’utilisateur fait glisser la déplaçable sur la cible de dépôt., Cet événement ne se déclenche que lorsque l’élément déplaçable passe de l’extérieur à la fin, ce qui est généralement déterminé par la position du curseur de la souris.

une Fois l’élément déplaçable est sur la cible, la balise dragover événement se déclenche, et continue aussi longtemps que l’élément déplaçable est glissé sur la cible de dépôt.

Si l’utilisateur fait glisser à nouveau l’objet déplaçable hors de la cible de dépôt, l’événementdragleave est déclenché.

Si l’utilisateur dépose l’objet déplaçable sur la cible, la balise drop événement est déclenché.,

exemple D’événement glisser-déposer

Voici un exemple avec lequel vous pouvez jouer. Essayez de faire glisser le logo HTML5 sur la cible de dépôt et voyez ce qui se passe. Essayez à la fois de laisser tomber l’image et de la faire glisser à nouveau.

faites Glisser et Déposez le Code

Laissez-nous jeter un oeil à la façon de gérer les événements de glisser-déplacer., De voir que nous allons tout d’abord créer un <img> élément qui nous pouvons glisser. Voici le code HTML pour cela:

<img src="http://tutorials.jenkov.com/html5/..." draggable="true">

Une fois que nous avons un élément déplaçable, nous avons besoin d’une cible de dépôt. Je vais utiliser un élément<div>:

<div style="width: 200px; height: 200px;">Drop here</div>

Une fois que nous avons l’élément déplaçable et l’élément cible drop, nous devons attacher les écouteurs d’événement., Voici le code JavaScript pour cela:

la fonction dragStart()appelle event.dataTransfer.setData() afin de définir les données transférées vers la cible de dépôt lorsque l’élément est supprimé. Tout ce dont vous avez besoin pour terminer correctement l’action chute, l’indiquer ici. Vous définissez à la fois les données et leur type mime.

les gestionnaires d’événements dragOver() etdrop() appellent tous deuxevent.preventDefault() et renvoient false. Ceci est nécessaire pour que le glisser-déposer fonctionne correctement., Le navigateur peut avoir un comportement de glisser-déposer par défaut que vous devez désactiver pour que votre code fonctionne.

Notez également que le drop() fonction de gestionnaire d’événement lit l’ensemble de données dans dragStart() via l’appel à event.dataTransfer.getData(). Il transmet le type mime des données en tant que paramètre pour l’extraire correctement.

c’est tout ce qui est nécessaire pour implémenter le glisser-déposer en HTML5. Vous pouvez le rendre un peu plus visuellement agréable, comme nous le verrons dans la section suivante.,

Feedback visuel

Vous pouvez utiliser les fonctions du gestionnaire d’événements glisser-déposer pour donner à l’utilisateur un feedback visuel plus explicite.

tout d’Abord, vous pouvez marquer l’élément déplacé de sorte que l’utilisateur peut voir l’élément dont il ou elle est glissant. Si plusieurs éléments se ressemblent et qu’ils peuvent tous être glissés, il est agréable pour l’utilisateur de voir lequel est traîné. Vous pouvez le faire en réponse à l’événementdragstart. Voici un exemple:

Une fois le glisser terminé, nous voulons supprimer à nouveau la bordure, cependant., Ceci est fait en réponse à l’événementdragend. Voici comment c’est fait:

Maintenant, l’utilisateur recevra un retour visuel montrant l’élément est déplacé.

Nous voulons aussi montrer à l’utilisateur qu’il est possible de retirer l’élément déplaçable lorsqu’il est traîné sur la cible de dépôt. Encore une fois, nous allons changer la bordure de l’élément. Nous allons le faire en réponse à la balise dragenter, dragleave et drop événements., Voici comment cela se fait:

maintenant, la bordure de la cible de dépôt deviendra verte et pointillée lorsque l’élément déplaçable sera glissé dessus. La bordure sera supprimée lorsque l’élément déplaçable est à nouveau déplacé ou si l’élément est déposé sur la cible de dépôt.

L’exemple ci-dessus n’affichait pas la fonction de gestionnaire d’événements dragOver(), mais assurez-vous de l’Ajouter pour empêcher le comportement par défaut du navigateur.,

Voici le code complet après l’ajout du feedback visuel:

L’objet DataTransfer, effectsAllowed, dropEffect et setDragImage ()

Vous pouvez augmenter le feedback visuel donné à l’utilisateur lors des actions de glisser-déposer en utilisant l’objetDataTransfer. L’objetDataTransfer a 2 attributs et une fonction que vous pouvez utiliser à cette fin., Ce sont:

• effectsAllowed
• dropEffect
• setDragImage()

Vous avez accès à la balise DataTransfer objet dans le dragstart et drop événement d’objets. Voici un exemple dragstart fonction d’écoute qui définit la propriété effectsAllowed sur l’objet DataTransfer:

la propriété effectsAllowed est utilisée par les navigateurs pour changer le curseur de la souris l’action est effectuée lors du glisser-déposer d’un élément., En règle générale, le curseur de la souris change lorsque l’élément déplacé est au-dessus d’une cible de dépôt. Pas avant. Les valeurs valides de la balise effectsAllowed propriété sont les suivantes:

• aucun
• copier
• déplacer
• copyMove
• lien
• linkMove
• copyLink
• tous
• non initialisée

Le dropEffect est supposé montrer à l’utilisateur (via le curseur) ce qui se passe lorsque la souris passe sur une cible de dépôt, mais au moment de la rédaction (fév. 2014) les navigateurs semblent ignorer cela., Les valeurs valides de la balise dropEffect propriété sont les suivantes:

• aucun
• copier
• lien
• déplacer

Le setDragImage(image, x, y) fonction peut être utilisée pour définir l’image affichée par le navigateur lorsque l’utilisateur fait glisser un élément. Par défaut, le navigateur affiche une copie semi-transparente de l’élément d’origine, mais si vous voulez une image différente, vous pouvez définir une image différente en utilisant cette fonction. Les propriétésx ety peuvent être utilisées pour définir des décalages d’emplacement pour l’image lorsqu’elle est affichée., Par défaut, le coin supérieur gauche de l’image de glisser est situé à l’extrémité du pointeur de la souris. En définissant différents x et y propriétés que vous pouvez modifier cela. Vous pouvez utiliser soit positif ou négatif x et y décalages.

Voici un exemple de code montrant comment mettre une image de glisser à l’intérieur de la balise dragStart() fonction écouteur d’événement:

Voici un exemple qui vous permet de jouer avec les différents paramètres sur le DataTransfer objet., Essayez de changer le effectsAllowed et faites glisser l’image et voyez ce qui se passe lorsque vous faites glisser le logo HTML5 vers le bas sur la div drop target.

glisser des fichiers dans le navigateur

Il est possible de faire glisser des fichiers dans le navigateur à partir du système de fichiers, et lire le nom et le contenu fichiers glissés depuis javascript . Vous le faites via L’API de fichier HTML5., Voici un écouteur drop target qui détecte le nom du fichier glissé:

var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i 
 Notice how the 
 function does not call the 
 function, but instead accesses the 
 property of the 
. The 
 property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon).
 You can read more about how to access the dragged files in my HTML5 file API tutorial.