Drag and drop javascript

De EduTech Wiki
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.

Cette exemple est issu de w3schols auquel des ont été ajouté pour la compréhension.

<!DOCTYPE HTML>

    <html>
    <head>
   
<title>Draganddrop simple</title>
    <style>

        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>

   

   Image que vous voulez faire déplacer     <img alt="votreimage" id="drag1" src="img.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

    </html>

-Références-

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

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Drag_and_drop_javascript&oldid=51832 »