Javascript拖拽功能代码

作者：秋了秋发表时间：2015年11月02日

web页面中的拖拽功能也是屡见不鲜，比如说一些页面的装扮，比如说qq空间，淘宝店铺装修，可视化布局的等都用到了拖拽的功能。新手看来觉得是高大上，其主要运用的是鼠标的坐标操作。详情代码如下：

var oDiv=document.getElementById('div1');
var disX=0,disY=0;
oDiv.onmousedown=function (ev){
   var oEvent=ev||event;
   disX=oEvent.clientX-oDiv.offsetLeft;
   disY=oEvent.clientY-oDiv.offsetTop;

   document.onmousemove=function (ev){
      var oEvent=ev||event;
      var l=oEvent.clientX-disX;
      var t=oEvent.clientY-disY;
 
      if(l<0){l=0;}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
         l=document.documentElement.clientWidth-oDiv.offsetWidth;
      }
      if(t<0){t=0;}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
         t=document.documentElement.clientHeight-oDiv.offsetHeight;
      }
      oDiv.style.left=l+'px';
      oDiv.style.top=t+'px';
   };
   document.onmouseup=function (){
      document.onmousemove=null;
      document.onmouseup=null;
};
return false;
};

使用方法：只需变换红色的部位即可，即选择器，你想要让那个div移动起来。注意：移动的那个对象css属性一定要使用position:absolute;

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/406.html

目录: 前端编程标签: js拖曳 8184次阅读