首页 > 技术文章 > JS实现网页图片拖动

reload-sun 2015-07-27 11:07 原文

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;
   }
 }
}

调用部分 addListener
var img = imgList[i];
addListener(img,"mousedown",drag);

界面元素部分
<img class="myImg" style="width:600px;height:600px;left:600px;top:0px;position:absolute;cursor:pointer;" src="${setting['files.contextpath']!}/${(p.propertyValue)}"/>
                    
必须实现left top position

推荐阅读