glisser-déposer
Il est possible de modifier l’ordre des éléments d’un document HTML, à l’aide de la Drag événement. Ci-dessous vient un exemple de base
la conception de la page
La disposition de la page pour l’exemple suivant inclut:
une zone DIVS glissée.
Tous les divs dans cette zone ont l’attribut draggable = "true". Il s’agit d’un attribut global qui indique que l’élément peut être glissé à l’aide de la fonctionnalité de l’API de glisser-déposer (glisser-déposer) P)
Zones de libération
Les zones de desseries sont des éléments HTML (DIVS dans ce cas) où l’utilisateur peut déposer les éléments déplacés.
Evénements utilisés
L’événement drag est déclenché avec une fréquence très élevée, tandis qu’un élément HTML est entraîné par l’utilisateur
l’événement dragstart Prise lorsque nous commençons à faire glisser.
L’objet DataTransfer est utilisé pour enregistrer des informations sur l’objet traîné. Nous utilisons DataTransfer.setData() pour définir la valeur de ces données.
dragend est déclenché à la fin lorsque nous relâchant le lecteur.
<
L’événement
div iD = « 8D206FBDAD »>
pousse lorsque la souris qui glisse un élément est au-dessus d’une zone reloise. Il est important d’empêcher le comportement par défaut de l’élément glacé, qui est de retourner sur votre site.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); L’événement dragenter Prise lorsque la souris qui fait glisser un élément entre dans la zone relative à la zone relative.
L’événement est déclenché lorsque la souris qui fait glisser un élément laisse la zone de goutte.