js拖拽

最新推荐文章于 2023-09-25 17:34:54 发布

zouluyifang

最新推荐文章于 2023-09-25 17:34:54 发布

阅读量461

点赞数

分类专栏： js

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 
  < 
  html 
  >  
 
  < 
  head 
  >  
 
  < 
  style 
  >  
 
  .move{cursor:move;    position:absolute;    width:100px;    height:100px;    background:green;-moz-user-select:none;/*火狐禁止选中*/}  
 
  </ 
  style 
  >  
 
  < 
  script  
  language 
  = 
  "javascript" 
  >  
 
  var X0,Y0,eX0,eY0;  
 
  var dragAble=false;  
 
  var dragObj;  
 
  var ie = (document.all) ? true : false;//是否为IE  
 
  function dragStart(e){//现在参数e在IE里也是是直接可以供函数使用的，比如第16行。  
 
  var oDragHandle;  
 
  if(ie){  
 
  oDragHandle = e.srcElement;  
 
  }else{  
 
  oDragHandle = e.target;  
 
  }      
 
  if(oDragHandle.className=='move')   
 
  {  
 
  dragObj=oDragHandle;  
 
  eX0= e.clientX;  
 
  eY0= e.clientY;  
 
  X0=parseInt(dragObj.style.left+0);      
 
  Y0=parseInt(dragObj.style.top+0);  
 
  dragAble=true;  
 
  }  
 
  }  
 
  //拖拽  
 
  function drag(e){  
 
  if(dragAble)  
 
  {  
 
  var eX1= e.clientX;  
 
  var eY1= e.clientY;              
 
  dragObj.style.left=X0+eX1-eX0+"px";  
 
  dragObj.style.top=Y0+eY1-eY0+"px";  
 
  }  
 
  }  
 
  //停止拖拽  
 
  function dragEnd(){  
 
  dragAble=false;  
 
  }  
 
  //事件监听浏览器兼容  
 
  function addListener(element,eName,fn){  
 
  if(ie){// ie       
 
  element.attachEvent("on"+eName,fn);  
 
  }else {// firefox  , w3c  
 
  element.addEventListener(eName,fn,false);  
 
  }      
 
  }  
 
  //添加事件监听  
 
  window.onload = function(){  
 
  addListener(document,"mousedown",dragStart);//鼠标按下开始拖拽  
 
  addListener(document,"mousemove",drag);//拖拽  
 
  addListener(document,"mouseup",dragEnd);//弹起停止拖拽      
 
  }  
 
  //注：添加了事件监听之后，IE里也可以像火狐里那样直接拿事件对象当函数的参数来用了，不必再window.event。  
 
  //但是不大清楚这是为什么，或者是说我还有什么地方理解错了，求交流。QQ：1140215489  
 
  </ 
  script 
  >  
 
  </ 
  head 
  >  
 
  < 
  body 
  >  
 
  < 
  div  
  class 
  = 
  "move" 
  > 
  <!--<br/>如果样式规定里此div可选，并且没有内容的话，火狐会有bug--> 
  </ 
  div 
  >  
 
  < 
  div  
  class 
  = 
  "move"  
  style 
  = 
  "background:blue;left:200px" 
  ></ 
  div 
  >  
 
  </ 
  body 
  >  
 
  </ 
  html 
  >

zouluyifang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拖拽

html>head>style>.move{cursor:move; position:absolute; width:100px; height:100px; background:green;-moz-user-select:none;/*火狐禁止选中*/}style>script language="javascript">
复制链接

扫一扫