glisser-déposer sur html5 (glisser-déposer HTML5)

Il s’agit de l’une des nouvelles fonctionnalités ajoutées dans HTML5, bien qu’elle puisse déjà être effectuée glisser et Débuter à travers d’autres techniques, il est maintenant inclus dans HTML5, il est « supposé » travailler sur tous les navigateurs, bien que s’ils ne respectent pas les normes, car il s’agit du cas de l’explorateur Internet, vous trouverez en principe cela ne fonctionne pas.

Pour expliquer ces nouvelles fonctionnalités, je vais servir de 2 exemples simples. Dans la première, nous verrons comment faire glisser et déposer des objets, les cloner ou les supprimer, et dans le second un simple puzzle de 4 pièces.

de sorte qu’il puisse être glissé et déposé un élément, deux types d’éléments, un élément à degrés de type (qui est obtenu en ajoutant au moins les attributs draggables = « true » et ondragstart = « la_funcion_que_sea (événement) ») et un élément dans lequel il peut être libéré au minimum. OnDrabover = « retour la_funcion_que_sea (événement) » et ondrop = « renvoie la_funcion_que_sea (événement) ».

Exemple 1 de glisser-déposer avec HTML5: glisser-déposer, cloner et supprimer des éléments

Dans l’exemple suivant, les éléments détournés de 14,2,3 et 4 sont déplacés et sur les éléments Box1,2,3 et sur les éléments de la corbeille peuvent être libérés.

<!DOCTYPE html><html land="es"><head> <meta charset="utf-8" /> <title>Drag & drop</title> <link rel="stylesheet" type="text/css" href="estilo.css"> <script type="text/javascript"> //... </script></head><body> <header> <h1> Un ejemplo del uso de Drag & Drop en HTML5 </h1> </header> <section> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)"> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 1 </div> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 2 </div> <div class="cuadradito" draggable="true" ondragstart="start(event)" ondragend="end(event)"> 3 </div> </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)"> </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return clonar(event)"> Clonadora </div> <div ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return eliminar(event)">Papelera</div> </section></body></html>

Nous allons expliquer brièvement que chaque attribut de l’élément glissé:

  • dragge: Si c’est vrai, il peut être glissé, s’il est faux ou omet que cela ne peut pas être Voir l’élément.
  • Ondragstart: Ici, l’action qui aura lieu sera indiquée lorsque vous commencez à faire glisser l’article.
  • Ondragend: Ici l’action qui aura lieu lorsque la traînée finale l’élément (quand libéré).

et pour l’élément pouvant être glissé sont ceux-ci:

  • ONDARACENTER: Ici l’action qui aura lieu quand un Élément glissé entre l’élément.
  • Ondragover: Ici, l’action qui sera effectuée lorsqu’un élément de glissement est sur l’élément. Dans cette fonction, il est indiqué que les éléments glissés peuvent être libérés ici.
  • Ondragleave: Ici, l’action qui sera effectuée lorsqu’un élément de glissement cesse d’être en haut de l’élément.
  • Ondrop: Ici, l’action qui aura lieu sera indiquée lorsqu’un élément glissé sur l’élément est libéré.

une fois vu quel est le code HTML nécessaire pour faire glisser et déposer des objets que nous vont voir la partie de JavaScript. Nous avons commencé par les fonctions de l’élément glissé.

La première action qui se produit est déclenchée dans Ondragstart:

function start(e) { e.dataTransfer.effecAllowed = 'move'; // Define el efecto como mover e.dataTransfer.setData("Data", e.target.id); // Coje el elemento que se va a mover e.dataTransfer.setDragImage(e.target, 0, 0); // Define la imagen que se vera al ser arrastrado el elemento y por donde se coje el elemento que se va a mover (el raton aparece en la esquina sup_izq con 0,0) e.target.style.opacity = '0.4'; // Establece la opacidad del elemento que se va arrastrar}

dans cette fonction définit Le mode dans lequel l’élément va être glissé (aucun, copier, copylink, copymove, lien, linkmove, déplacer ou tout) dans Effallowed, l’élément est défini pour être glissé et le mode dans lequel vous allez enregistrer ces informations. avec setdata (format, EXEMENTÉ) et vous pouvez également remplacer l’image de l’élément lorsque vous faites glisser pour remplacer celui que le navigateur utilise par défaut (l’élément avec un certain degré de transparence) par l’image (ou l’élément) indiquée et les coordonnées de l’élément par lequel l’élément a été traîné. De ces trois fonctions, seuls SetData est obligatoire. En plus de ces fonctions dans la fonction ci-dessus, l’opacité de l’élément qui est suivie est modifiée de sorte qu’elle semble un peu transparente et que l’élément en cours d’entraînement est meilleur.

quand il est fini. Élément Les informations associées à l’élément DatarTransfer sont éliminées par SetData avec la méthode ClearData et, comme lors du démarrage de l’élément, l’opacité de l’élément est modifiée en son état d’origine.

function end(e) { e.target.style.opacity = ''; // Restaura la opacidad del elemento e.dataTransfer.clearData("Data");}

Nous allons maintenant voir les fonctions exécutées lorsque les événements de l’élément de conteneur sont produits:

Les fonctions exécutées dans les événements ONDRAGENTER et ONDRABAVERE peuvent être utilisés pour Exemple Pour modifier l’apparence Lorsqu’un élément glissé de l’élément est entré dans ou sort, dans cet exemple, un bord en pointillé gris est placé lorsqu’un élément de glissement passe et supprime le bord lorsqu’il sort.

function enter(e) { e.target.style.border = '3px dotted #555'; }function leave(e) { e.target.style.border = ''; }

quand un Élément glissé sur un élément dans lequel vous « pouvez » déposer est exécuté l’événement ondrOfover à partir duquel il s’appelle la fonction suivante:

function over(e) { var elemArrastrable = e.dataTransfer.getData("Data"); // Elemento arrastrado var id = e.target.id; // Elemento sobre el que se arrastra // return false para que se pueda soltar if (id == 'cuadro1') { return false; // Cualquier elemento se puede soltar sobre el div destino 1 } if ((id == 'cuadro2') && (elemArrastrable != 'arrastrable3')) { return false; // En el cuadro2 se puede soltar cualquier elemento menos el elemento con id=arrastrable3 } if (id == 'cuadro3') { return false; } if (id == 'papelera') { return false; // Cualquier elemento se puede soltar en la papelera } }

Le plus important de cette La fonction est ce qui revient, si vous pouvez libérer l’élément renvoie false (si, ce n’est pas une erreur, il renvoie false si vous pouvez être publié) et true sinon.

Pour indiquer que les éléments peuvent être libérés et où ils peuvent être libérés sur la ligne 2, l’élément est obtenu et dans le 3 l’ID de l’élément sur lequel il glisse et la combinaison des deux peut être tout ce qui n’est pas tout Les éléments peuvent être libérés dans tous les « conteneurs ».

La fonction suivante permet à l’élément d’être placé dans la position exacte dans laquelle elle est libérée. Avec les lignes 2 et 3, l’élément glissé serait déjà dans l’élément « conteneur », mais pour être placé dans la position exacte que nous voulons être utilisée par position absolue, nous devons donc retirer les coordonnées dans lesquelles l’élément (lignes 14 et 15), mais s’il est libéré sur un bord du « conteneur », il se peut que la partie de l’élément glissé est hors du conteneur, ce qui n’est pas très esthétique, de sorte que les coordonnées du conteneur et la taille du Conteneur et l’élément glissé pour savoir si l’élément est à l’extérieur ou à l’intérieur et s’il reste à corriger la position de sorte qu’elle soit à l’intérieur. (Il est seulement vérifié qu’il ne sort pas à droite et en dessous car, comme dans SETDragimage, les coordonnées étaient de 0,0 ne peut pas sortir au-dessus ou à gauche.) Dans la dernière ligne de la fonction, le bord de l’état d’origine est restauré. Que cela avait été changé dans la fonction Entrée.

function drop(e) { var elementoArrastrado = e.dataTransfer.getData("Data"); // Elemento arrastrado e.target.appendChild(document.getElementById(elementoArrastrado)); // Añade el elemento arrastrado al elemento desde el que se llama a esta funcion // Dimensiones del elemento sobre el que se arrastra tamContX = $('#'+e.target.id).width(); tamContY = $('#'+e.target.id).height(); // Dimensiones del elemento arrastrado tamElemX = $('#'+elementoArrastrado).width(); tamElemY = $('#'+elementoArrastrado).height(); // Posicion del elemento sobre el que se arrastra posXCont = $(e.target).position().left; posYCont = $(e.target).position().top; // Posicion absoluta del raton x = e.layerX; y = e.layerY; // Si parte del elemento que se quiere mover se queda fuera se cambia las coordenadas para que no sea asi if (posXCont + tamContX 

avec glisser-déposer, vous pouvez également cloner des éléments de manière très simple. L’élément glissé est obtenu dans la première ligne pour pouvoir le copier et la suivante est restaurée de sorte que l’élément cloné a l’opacité originale. Ensuite, l’élément est cloné et l’identifiant est remplacé par l’élément cloné pour être unique avec un nom et un compteur qui sera une variable globale (une variable hors des fonctions) afin qu’elle ne soit pas répétée et ajoutée à l’élément à partir de laquelle Il s’appelle cette fonction (dans le cas de cet exemple dessiné3).

function clonar(e) { var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); // Elemento arrastrado elementoArrastrado.style.opacity = ''; // Dejamos la opacidad a su estado anterior para copiar el elemento igual que era antes var movecarclone = elementoArrastrado.cloneNode(true); // Se clona el elemento movecarclone.id = "ElemClonado" + contador; // Se cambia el id porque tiene que ser unico contador += 1; elementoClonado.style.position = "static"; // Se posiciona de forma "normal" (Sino habria que cambiar las coordenadas de la posición) e.target.appendChild(movecarclone); // Se añade el elemento clonado e.target.style.border = ''; // Quita el borde del "cuadro clonador"}

et pour terminer cet exemple, nous allons avec le code de la fonction pour supprimer éléments crag Cette fonction est très simple, tout ce qui doit être pris en compte est que pour supprimer un article que vous devez le faire à partir de votre élément parent, mais grâce à l’utilisation de parentnode, vous n’avez besoin que de l’élément que vous souhaitez supprimer.

function eliminar(e) { var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); // Elemento arrastrado elementoArrastrado.parentNode.removeChild(elementoArrastrado); // Elimina el elemento e.target.style.border = ''; // Quita el borde}

Ici, vous pouvez voir l’exemple complet de fonctionnement:

voir l’exemple de stylo glisser & goutte dans HTML5 par des chambres Ivan (@ ISC7) sur CodePen

Exemple 2 de glisser-déposer avec HTML5: un puzzle

Cet exemple est assez simple et surtout si vous avez déjà vu le Exemple précédent dans lequel expliquer les différents aspects de la glisser & goutte avec HTML5.

Le code est très similaire à celui de l’exemple précédent, le HTML est analogue Mais depuis cette période, l’objectif est de faire un casse-tête, il existe un conteneur initial dans lequel les morceaux du puzzle et un autre conteneur où le puzzle sera fabriqué comportant quatre autres conteneurs une pour chaque pièce.

et comme pour les fonctions JavaScript, il y a aussi trop de commentaires sur, uniquement dans la fonction de goutte, la première ligne doit être E.PreventDefault (); Pour l’empêcher de laisser tomber les pièces des images, l’action par défaut du navigateur se produit (qui sera l’image) et fonctionne ainsi tout est à prévoir.

/** * Función que se ejecuta al arrastrar el elemento. */function start(e) { e.dataTransfer.effecAllowed = 'move'; // Define el efecto como mover (Es el por defecto) e.dataTransfer.setData("Text", e.target.id); // Coje el elemento que se va a mover e.target.style.opacity = '0.4';}/** * Función que se ejecuta se termina de arrastrar el elemento. */function end(e){ e.target.style.opacity = ''; // Restaura la opacidad del elemento e.dataTransfer.clearData("Data"); }/** * Función que se ejecuta cuando un elemento arrastrable entra en el elemento desde del que se llama. */function enter(e) { return true;}/** * Función que se ejecuta cuando un elemento arrastrable esta sobre el elemento desde del que se llama. * Devuelve false si el objeto se puede soltar en ese elemento y true en caso contrario. */function over(e) { if ((e.target.className == "contenedorPieza") || (e.target.id == "contenedorPiezas")) { return false; } else { return true; }} /** * Función que se ejecuta cuando un elemento arrastrable se suelta sobre el elemento desde del que se llama. */function drop(e) { e.preventDefault(); // Evita que se ejecute la accion por defecto del elemento soltado. var elementoArrastrado = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(elementoArrastrado)); // Coloca el elemento soltado sobre el elemento desde el que se llamo esta funcion comprobarPuzzle();}function comprobarPuzzle(){ if ((document.getElementById('pieza1').parentNode.id=='uno') && (document.getElementById('pieza2').parentNode.id=='dos') && (document.getElementById('pieza3').parentNode.id=='tres') && (document.getElementById('pieza4').parentNode.id=='cuatro')) { alert('Felicidades, has hecho un puzzle de 4 piezas xD'); }}

Pour terminer commentant la fonction de contrôle qui vérifie simplement si chaque pièce est en position et si cela l’indique avec un message. Cette fonction doit être appelée chaque fois qu’une pièce est placée par ce qu’on appelle à partir de la fonction de goutte.

et enfin le puzzle afin que vous puissiez le voir:

Voir le puzzle de stylo drag & Drop HTML5 de Ivan Salas (@ ISC7) sur Codepen

Vous pouvez télécharger le code des deux exemples.

4 Partager

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *