Les fonctions JavaScript existent depuis longtemps et nous permettent de créer des interfaces glisser-déposer, mais aucune de ces implémentations n’était native du navigateur.
En HTML5, nous avons une méthode native de création d’interfaces glisser-déposer (avec un peu d’aide de JavaScript).
Je vais vous expliquer comment y parvenir ...
Je voudrais que cela disparaisse avant que nous progressions: actuellement, le glisser-déposer HTML5 est pris en charge par tous les principaux navigateurs de bureau (y compris IE (même IE 5.5 est partiellement pris en charge)). navigateurs.
A chaque étape de l'opération glisser-déposer, un événement différent est déclenché afin que le navigateur sache quel code JavaScript exécuter; les événements sont:
Avec tous ces écouteurs d’événements, vous avez beaucoup de contrôle sur le fonctionnement de votre interface et son fonctionnement précis dans différentes circonstances.
C'est là que se passe toute la magie du glisser-déposer; Cet objet contient les données envoyées par l'opération glisser. Les données peuvent être définies et récupérées de différentes manières, les plus importantes étant:
Maintenant, nous allons commencer à créer notre simple glisser-déposer exemple, vous pouvez voir que nous avons deux petites divisions et une plus grande, nous pouvons faire glisser les petites à l'intérieur du grand et nous pouvons même les déplacer.
La première chose à faire est de créer notre HTML. Nous rendons les divs pouvant être déplacés avec l’attribut draggable, comme ceci:
draggable="true">Lorsque cela est fait, nous devons définir la fonction javascript qui s'exécutera lorsque nous commencerons à faire glisser cet élément:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}Dans ce code, nous déclarons d'abord quel type d'effet nous autorisons dans l'opération et nous le configurons pour le déplacer. Dans la deuxième ligne, nous définissons les données pour l'opération. Dans ce cas, le type est Texte et la valeur est l'ID de l'élément. nous traînons Après cela, nous utilisons la méthode setDragImage pour définir ce que nous allons faire glisser et ensuite le curseur en faisant glisser, et comme les cubes sont de 200 par 200px, je l'ai placé au centre. Finalement, nous retournons vrai.
Pour qu'un élément accepte une chute, il doit écouter 3 événements différents: dragEnter, dragOver et aussi l'événement drop , ajoutons donc ceci à notre fichier HTML dans le div avec l'ID de big:
Maintenant que nous avons ajouté des écouteurs d'événement dont nous avons besoin pour créer ces fonctions, nous allons commencer par les événements dragenter et dragover:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}Dans la première fonction, nous définissons ce que nous voulons faire lorsque l’élément que nous déplaçons atteint l’élément dans lequel il est censé être déposé. Dans ce cas, nous empêchons uniquement le comportement par défaut du navigateur, mais vous pouvez modifier en arrière-plan ou ajoutez du texte pour indiquer que l'utilisateur fait glisser vers la zone correcte et en utilisant l'événement glisser-déplacer, vous pouvez annuler les modifications apportées. Ensuite, dans la fonction dragOver , nous empêchons simplement que la valeur par défaut autorise la suppression.
La partie suivante est l'endroit où nous définissons la fonction lorsque nous déposons réellement l'élément sur la cible souhaitée:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}Dans cette dernière partie, nous définissons d'abord une variable appelée data dans laquelle nous obtenons toutes les données disponibles pour le format texte, puis nous ajoutons ces données (qui seront l'élément que nous déplaçons) à la div où nous souhaitons les déposer. l'élément. Enfin quelques touches finales comme arrêter la propagation et retourner également faux.
Vérification la démo , vous pouvez voir que nous avons également fait en sorte que les deux divs puissent être ramenés à leur emplacement d'origine. Heureusement, ajouter une autre cible peut être plus simple que vous ne le pensez. Comme les fonctions sont déjà en place, il suffit d'ajouter les écouteurs d'événement, comme ceci:
Et c'est tout ce dont nous avons besoin pour permettre de faire glisser les div vers l'emplacement d'origine.
Il existe de nombreuses applications de glisser-déposer créées à l'aide de bibliothèques JavaScript, et il est souvent plus simple d'utiliser ces bibliothèques. Mais j'espère que, dans cette technique HTML5 et JavaScript, vous voyez le futur potentiel de la solution native.
Avez-vous construit une interface glisser-déposer? Comment le HTML5 natif se compare-t-il aux solutions JavaScript pures? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, déposer l'image via photophilde.