Fonction glisser / déposer une image

posted in: html | 0

Glisser et déposer le texte dans le rectangle.

siteweb3

Le code expliqué

<style>
#div2 {width:350px;height:100px;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>
<p>Glisser et déposer le texte dans le rectangle.</p>
<div id= »div2″ ondrop= »drop(event) » ondragover= »allowDrop(event) »></div>
<br>
<p><img src= »http://lescarnetsd.entara.be/wp-content/uploads/2015/02/siteweb3.jpg » alt= »siteweb3″ width= »94″ height= »66″ class= »alignnone size-full wp-image-153″ id= »drag2″ draggable= »true » ondragstart= »drag(event) » /></p>

logowebmaster1