<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function dragPic(e){ var e=e||window.event; var myElement= e.srcElement|| e.target; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue=false; } var mypic=document.getElementById("mypic"); mypic["draging"]=true; var relLeft= e.clientX-parseInt(myElement.style.left); var relTop= e.clientY-parseInt(myElement.style.top); myElement.onmouseup=function(){ mypic["draging"]=false; } document.onmousemove=function(eMove){ var eMove=eMove||window.event; if(mypic["draging"]==true){ myElement.style.left=eMove.clientX-relLeft+"px"; myElement.style.top=eMove.clientY-relTop+"px"; return false; } } } window.onload=function(){ var mypic=document.getElementById("mypic"); mypic["draging"]=false; if(navigator.userAgent.indexOf("MSIE")>0){ mypic.attachEvent("onmousedown",dragPic);} else{ mypic.addEventListener("mousedown",dragPic,false); } } </script> <body> <img src="img.JPG" id="mypic" style="left:10px;top:10px;position: absolute;width:200px;height:120px"/> </body> </html>