Drag and drop javascript

De EduTech Wiki
Révision datée du 6 décembre 2015 à 13:26 par Andrés Gomez (discussion | contributions) (Page créée avec « -Introduction- Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités. {| class=wikitable width=60... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

-Introduction-

Javascript permet aussi de faire du drag and drop. Ce tutoriel tente de vous donner quelques bases de ces fonctionnalités.



Animer le texte:

<!DOCTYPE HTML> <html> <head> <style>

  1. div1 {width:350px;height:70px;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>

Drag the W3Schools image into the rectangle:


<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body> </html>

-Références-

http://www.w3schools.com/tags/att_script_src.asp