Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var isdrag=false; var x,y; var dobj; function movemouse(e) { if (isdrag) { dobj.style.left = tx + e.clientX - x ; dobj.style.top = ty + e.clientY - y ; return false; } } function selectmouse(e) { var fobj = e.target; if (fobj.className=="dragme") { isdrag = true; dobj = fobj; tx = parseInt(dobj.style.left+0,10); ty = parseInt(dobj.style.top+0,10); x = e.clientX; y = e.clientY; document.onmousemove=movemouse; return false; } } document.onmousedown=selectmouse; document.onmouseup=function(){isdrag=false;}; </script> <style type="text/css"> .dragme{position:absolute; visibility:visible; } </style> <img src="http://i.imgur.com/c1m9UYF.png?1" alt="drag-and-drop image script" style="cursor:move;" title="drag-and-drop image script" class="dragme" id="croix"> <table> <tr id="ch1"> <td ><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td> </tr> <tr id="ch3"> <td><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td> </tr> <tr id="ch3"> <td><img src="http://i.imgur.com/p1KPWBz.png?1" title="source: imgur.com" /></td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ background:#b2bdc6; } #tds{ margin: 0px 100px; background: white; } #tds td{ height:96px; width:82px; border: 3px solid black; } #tds td img{ display:block; margin:auto; margin-top:-10px; } </style> <script type="text/javascript"> var elem='' function drag(e){ var lui=typeof window.addEventListener != 'undefined' ? e.currentTarget : window.event.srcElement; elem=lui e =(!e) ? window.event : e; e.dataTransfer.setData('Text','r'); } function droper(e){ typeof window.addEventListener != 'undefined' ? e.preventDefault() : event.returnValue = false; var obj = typeof window.addEventListener != 'undefined' ? e.currentTarget : window.event.srcElement; var valeur = e.dataTransfer.getData("Text"); obj.appendChild(elem) alert(obj.parentNode.id) } function init(){ var all=document.getElementById('tds').getElementsByTagName("td") for (var i=0; i<all.length; i++){ all[i].ondragover=function(){return false} if(typeof window.addEventListener == 'undefined'){ all[i].attachEvent('ondrop', droper); } else{ all[i].addEventListener('drop', droper, false); } } } onload=init </script> </head> </body> <img ondragstart='drag(event)' draggable='true' src="http://i.imgur.com/c1m9UYF.png?1" alt="drag-and-drop image script" style="cursor:move;" title="drag-and-drop image script" class="dragme" id="croix"> <table id='tds'> <tr id="ch1"> <td></td> </tr> <tr id="ch2"> <td></td> </tr> <tr id="ch3"> <td></td> </tr> </table> </body> </html>