js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

  注意使用preventDefault防止浏览器的默认事件操作发生

  

复制代码 代码如下:

  <script language="javascript" type="text/javascript">

  var isDrag = false;

  function isIE(){

  if(navigator.userAgent.indexOf("MSIE")>0){return true;}

  else{return false;}

  }

  function addListener(element,e,fn){

  if(isIE()){element.attachEvent("on" + e,fn);}

  else{element.addEventListener(e,fn,false);}

  }

  function drag(e){

  var e = e || window.event;

  var element = e.srcElement || e.target;

  if(e.preventDefault)e.preventDefault();

  else e.returnvalue=false;

  isDrag = true;

  var relLeft = e.clientX - parseInt(element.style.left);

  var relTop = e.clientY - parseInt(element.style.top);

  element.onmouseup = function(){ isDrag = false; }

  document.onmousemove = function(e_move){

  var e_move = e_move || window.event;

  if(isDrag){

  element.style.left=e_move.clientX - relLeft + "px";

  element.style.top=e_move.clientY - relTop + "px";

  return false;

  }

  }

  }

  window.onload = function()

  {

  var element = document.getElementById("elimg");

  var element2 = document.getElementById("eldiv");

  addListener(element,"mousedown",drag);

  addListener(element2,"mousedown",drag);

  }

  </script>

  <div id="eldiv" style="width:140px;height:100px;background:#EEE;position:absolute;left:117px;top:124px"></div>

  <img id="elimg" style="left:609px;top:113px;position:absolute" src="http://www.cnit618.com/template/images/logo.gif" />