Explication détaillée de l'opération glisser-déposer native HTML5

La fonction glisser-déposer de H5 a été utilisée dans un développement de projet récent. Étant donné que le projet existant utilise le bucket de la famille VUE, le plug-in vuedragable est utilisé, mais l'ensemble du processus est assez pénible. J'ai donc décidé de commencer à étudier les principes du glisser-déposer H5, puis de les appliquer au framework basé sur les données. Pour implémenter les opérations de glisser-déposer dans H5, au moins deux étapes sont requises : 1) Définissez l'attribut draggable de l'élément d'objet que vous souhaitez glisser-déposer sur true (les éléments img et a autorisent le glisser-déposer par défaut) ; et en faisant glisser le code de gestion des événements pertinent. Pour faciliter les tests, j'utilise d'abord la bibliothèque jQuery pour compléter la fonction glisser-déposer de base.

Lorsque vous faites glisser l'élément déplaçable tout en maintenant la souris enfoncée, il sera déclenché dans l'ordre suivant :

glisserdémarrer -> glisser -> dragend

1. dragstart : déclenché lorsque la souris est enfoncée et commence à glisser (déclenché une fois)
2. glisser : déclenché en maintenant la souris enfoncée et en faisant glisser (déclenché en continu)
3. dragend : Déclenché après avoir relâché la souris (que l'élément soit placé sur une cible de placement valide ou une cible de placement invalide)

Lorsque l'élément déplaçable est glissé dans le conteneur, il sera déclenché dans l'ordre suivant :

dragenter -> glisser -> déposer

dragenter : tant qu'un élément est glissé vers la cible de dépôt, l'événement dragenter sera déclenché.

dragover : dragenter est suivi de l'événement dragover, et cet événement continuera à être déclenché tant que l'élément glissé se déplace toujours dans la plage de la cible de dépôt.

dragleave : lorsque l'élément est déplacé hors de la cible de placement, le glisserleave sera déclenché.

drop : déclenché lorsque l'élément glissé est placé sur l'élément cible

Depuis le début du déplacement de l'élément jusqu'à son placement dans la zone cible, il sera déclenché dans l'ordre suivant :

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

Si nous ajoutons directement l'attribut draggable à un élément, il peut être glissé directement dans Chrome et Opera (il n'y a pas d'opération de libération (comme la flèche se transformant en signe +)), mais il n'y a pas de réponse dans Firefox.

 <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Bon</li> <li draggable=true id=3>Moyen</li> <li draggable=true id=4>Médiocre</li> </ul> <script> //Pas de code JS</script>

Pour résoudre ce problème, vous devez lier le gestionnaire d'événements dragstart à l'élément glisser et appeler la fonction event.dataTransfer.setData dans cette fonction.

 <script> <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Bon</li> <li draggable=true id=3>Moyen</li > <li draggable=true id=4>Différence</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Doit accéder à l'objet dataTransfer utilisé pour la communication par glisser-déposer event.dataTransfer.setData(Text,'1' });</script>

Le logo publiable peut être différent selon le système d'exploitation. Sous Mac Chrome, il apparaît sous la forme d'un logo circulaire avec un « + » blanc intégré.

La solution est de lier l'événement dragover au conteneur

 <ul class=canDrog> <li draggable=true id=1>Excellent</li> <li draggable=true id=2>Bon</li> <li draggable=true id=3>Moyen</li> <li draggable=true id=4>Différence</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>Section/semaine</th> <th>Lundi</th> <th>Mardi</th> <th>Mercredi</th> <th>Jeudi</th> <th>Vendredi</th> </tr> </thead> <tbody > <tr> <td>Section 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable= true >< /td> <td draggable=true ></td> </tr> <!--Omis ici--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox doit accéder à l'objet dataTransfer utilisé pour la communication par glisser-déposer event.dataTransfer.setData(Text,'1' }); Chrome et Opera doivent ajouter $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>

Si vous relâchez l'élément glissé lors de l'utilisation de Firefox, le navigateur par défaut ouvrira un nouvel onglet, comme suit

En effet, le navigateur exécute le comportement par défaut après la fonction de rappel drop. La solution habituelle consiste à ajouter du code qui empêche l'exécution de l'événement par défaut et empêche le bouillonnement dans le crochet de dépôt du conteneur glisser.

 <script> //Libère l'élément dans l'élément actuel $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation(); });</script>

Cependant, si des éléments déplaçables sont déplacés vers d'autres endroits, le problème de l'ouverture de nouveaux onglets se produira toujours. Dans ce cas, le code ci-dessus peut être ajouté à tous les conteneurs.

Code source : https://github.com/pluslicy/drag

Plus tard, nous étudierons la bibliothèque de plug-ins vuedraggable et l'appliquerons dans le framework vue.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.