« Drag and drop javascript » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(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... »)
 
Aucun résumé des modifications
Ligne 7 : Ligne 7 :


{| class=wikitable width=600 align=center
{| class=wikitable width=600 align=center
|Animer le texte:
|Drag and drop simple:
<!DOCTYPE HTML>
:<!DOCTYPE HTML>
<html>
:<html>
<head>
:<head>
<style>
:<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
:#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
:</style>
<script>
:<script>
function allowDrop(ev) {
:function allowDrop(ev) {
    ev.preventDefault();
:    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>


function drag(ev) {
:<p>Drag the W3Schools image into the rectangle:</p>
    ev.dataTransfer.setData("text", ev.target.id);
}


function drop(ev) {
:<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    ev.preventDefault();
:<br>
    var data = ev.dataTransfer.getData("text");
:<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    ev.target.appendChild(document.getElementById(data));
:</body>
}
:</html>
</script>
</head>
<body>
 
<p>Drag the W3Schools image into the rectangle:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>
|}
|}


Version du 6 décembre 2015 à 13:28

-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

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