Remplace toutes les occurrences dans une chaîne
Le Drag and Drop (gliser et déplacer) fait désormais une partie des nouveauté de la norme HTML5
Le Drag and Drop (gliser et déplacer) fait désormais une partie de la norme HTML5.
Le Drag and Drop est une caractéristique très courante. C'est lorsque vous faites glisser un objet avec la souri vers un autre emplacement.
En HTML5, drag and drop fait partie de la norme, et tout élément peut être déplacé.
Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 soutiennent le drag and drop.
Remarque:
LeDrag and Drop ne fonctionne pas dans Safari 5.1.2.
Drag and Drop HTML5 Exemple
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 Drag and Drop </title> <style type="text/css"> #div1 {width:140px;height:180px;border:1px solid #aaaaaa;} </style> <script> 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>Déplacer l'image Apprendre dans le rectangle :</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="http://www.oujood.com/images/apprendre.png" draggable="true" ondragstart="drag(event)" width="140" height="180"> </body> </html>
Tout d'abord: Pour faire un élément déplaçable, définissez l'attribut draggable sur true:
<img draggable="true">
Ensuite, spécifier ce qui doit arriver lorsque l'élément est déplacé.
Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(évent), qui spécifie les données à faire glisser.
Le dataTransfer.setData() dans le script et une méthode qui définit le type de données et la valeur des données glissées:
Exemple : 📋 Copier le code
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
Dans ce cas, le type de données est "texte" et la valeur est l'identifiant de l'élément déplaçable qui est l’id ("drag1").
L'événement ondragover spécifie où les données glissées peuvent être déposés.
Par défaut, les données / éléments ne peuvent pas être déposés dans d'autres éléments. Afin de permettre une goutte, il faut éviter le traitement par défaut de l'élément.
Ceci est fait en appelant la event.preventDefault () méthode pour l'événement ondragover:
ev.preventDefault()
Lorsque les données glissé sont déposées, un événement ondrop se produit.
Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event):
Exemple : 📋 Copier le code
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>HTML5 l’élément SVG</title> <style type="text/css"> #div1, #div2 {float:left; width:140px; height:180px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script> 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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://www.oujood.com/images/apprendre.png" draggable="true" ondragstart="drag(event)" id="drag1" width="140"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>Par carabde 10 juin 2014