programmateur Cliquez sur

glisser-déposer (glisser-déposer) fait partie intégrante de la norme HTML5. Tout article peut être glissé et déposé. Littéralement, glisser-déposer consiste à saisir un objet et à le faire glisser vers un autre emplacement.

Dans la documentation officielle MDN, la fonction Glisser et Drop est décrite comme suit: Le HTML de glisser-déposer permet aux applications utilisez la fonctionnalité. de glisser-déposer dans Firefox et d’autres navigateurs. Par exemple, à travers ces fonctions, les utilisateurs peuvent utiliser la souris pour sélectionner des éléments glissés, faire glisser des éléments sur des éléments de drone et placer ces éléments en relâchant le bouton de la souris. Un élément translucide de l’élément de traînant indique que le pointeur de la souris est suivi pendant l’opération d’entraînement.

pour les sites Web, les extensions et les applications XUL, vous pouvez personnaliser les types d’éléments pouvant être déplacés, le type de commentaires généré par les éléments glissés et les éléments pouvant être placés.

Remarque: l’élément IMG et un élément (doit spécifier HREF) vous permettent de glisser et de déposer par défaut.

look Autre exemple:

<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 200px; height: 100px; padding: 10px; border: 1px solid red; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Arrastre y suelte la imagen en el rectángulo:</p> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img src="drag-image.png" draggable="true" ondragstart="drag(event)" /> </body></html>

Déterminez ce qui est glissé
( Étant donné que l’IMG peut être glissé et goutfuleux par défaut, l’élément qui peut être glissé dans le code ci-dessus peut également être écrit et pour d’autres éléments: pour rendre l’élément expliqué, définissez d’abord l’attribut glisser dans True, plus le global Ondragstart Fonction de contrôleur d’événement
Définir les données de Drag
Chaque chalutier a un Attribut DataTransfer Pour enregistrer les données d’événement. Cette propriété (objet DaTransfer) a également des procédés de gestion des données de glace. La méthode Sedata () ajoute les données de glisser d’un élément, comme indiqué dans l’exemple de code suivant:

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

Dans cet exemple, le type de données est  » Texte « et la valeur est l’ID de l’élément glissé ( » Drag1 « ).
Définir une zone d’automne
L’événement OnDrabover Spécifie où placer les données traînées. Par défaut, les données / éléments ne peuvent pas être placées sur d’autres éléments. Si vous devez définir l’emplacement autorisé, nous devons éviter la manipulation prédéterminée des éléments comme suit:

function allowDrop(ev) { ev.preventDefault();}

Site
Lorsque les données déplacées sont placées, SE Il produit un événement d’automne. Comme suit:

function drop(ev) { // Llame a preventDefault () para evitar el procesamiento predeterminado de datos por parte del navegador ev.preventDefault(); // Obtenga los datos que arrastra el método dataTransfer.getData ("Texto"). Este método devolverá cualquier conjunto de datos al mismo tipo en el método setData (). var data = ev.dataTransfer.getData("Text"); // Los datos arrastrados son la identificación del elemento arrastrado ("drag1"), agregue el elemento arrastrado al elemento colocado (elemento de destino) ev.target.appendChild(document.getElementById(data));}

Pour plus de détails Voir: MDN Drag and Drop ~

Leave a Comment

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