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.



Drag and drop simple:
<!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