当前位置: 秋叶网络博客 前端编程 ◊ Javascript拖拽功能代码

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;

0
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/blog/406.html
目录:前端编程标签:js拖曳 7146次阅读
登 录
点击获取验证码
还没账号?点击这里