dragstart
et dragend
: lancés sur l'objet glissé au début/à la fin de la glissadedrag
: lancé sur l'objet glissé lors d'un mouvementdragenter
et dragleave
: lancés sur un élément au début/à la fin de son survol par un objet glissé
mouseover
/mouseout
(et pas mouseenter
/mouseleave
), ce qui les rend très désagréables à utiliser…dragover
: lancé sur la zone survolée lors d'un mouvementdrop
: lancé sur la zone de lâcher (si c'est une zone de lâcher valide !)dragexit
: différence avec dragleave
subtile, et pas implémenté partout -> ignorerDémos:
dataTransfer
de l'événement, contient les données transférées par le biais de l'objet glissé, dans une instance de DataTransfer
dataTransfer.getData(type_mime)
, dataTransfer.setData(type_mime, data)
pour manipuler les donnéesdataTransfer.files
: tableau des fichiers présents dans les données (notamment si l'on fait glisser un fichier depuis l'extérieur du navigateur)drop
, pas dragenter
/dragleave
(pour des raisons de sécurité : l'internaute peut faire passer un objet devant la fenêtre du navigateur sans vouloir communiquer les données à la page web ouverte)dataTransfer.items
contient un tableau des DataTransferItems
contenus dans l'objetdataTransfer.types
contient un tableau de leurs types (MIME)Démo de tout ça sur une image ou un lien. dropzone: input file et/ou textarea.
dropEffect
de DataTransfer
: modifie notamment l'indice visuel à côté de l'élément glissé, en fonction de l'effet voulu du drop (copie, déplacement ou lien).
dragenter
/dragleave
effectAllowed
de DataTransfer
: pour contrôler le type d'effet qui est autorisé, copie, déplacement ou lien (ou une combinaison)
dragstart
uniquementDataTransfer.setDragImage()
: pour modifier la ghost image. Peut être une image ou un canevas, ou un autre élément (mais il faut que cet élément soit visible pour que ça fonctionne sous Firefox…) peut-être setDragImage est obligatoire pour avoir l'effet par défaut sur certains browsers? je ne pense pas.draggable
à true
dragstart
dragstart
pour placer des données dans le dataTransfer
, sinon la glissade s'arrête ici (aucun autre événement n'est lancé)drop
preventDefault
sur les événements dragover
drop
, sinon Firefox essaie d'ouvrir l'objet glissé