码迷,mamicode.com
首页 > Web开发 > 详细

js拖拽分析

时间:2018-03-11 17:39:34      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:window   位置   client   doc   sed   移动   拖拽   style   设置   

js拖拽分析

思路

1、三个鼠标事件,mousedown,mousemove,mouseup

2、可移动性absolute

3、边界限制

得到鼠标点击处和div边界的距离,然后得出top 和 left 的值

具体

mousedown

   div.onmousedown=function(event){
         var event=event||window.event
         var diffX=event.clientX-div.offsetLeft
         var diffY=event.clientY-div.offsetTop
   }

diffX/Y得出的是开始点击处和div边界的距离

mousemove

document.onmousemove=function(event){
         var event=event||window.event
         var l=event.clientX-diffX
         var t=event.clientY-diffY
         if(t<0){
              t=0
      }
         if(t>document.documentElement.clientHeight-div.offsetHeight){
              t=document.documentElement.clientHeight-div.offsetHeight
      }
         if(l>document.documentElement.clientWidth-div.offsetWidth){
              l=document.documentElement.clientWidth-div.offsetWidth
      }
          if(l<0){
              l=0
      }
          div.style.left=l+‘px‘
          div.style.top=t+‘px
}

if后的语句主要是限制边界处而设置的

mouseup

document.onmouseup=function(){
        document.onmousemove=null
        document.onmouseup=null
}

主要是当鼠标放开时,取消move带来的结果。

当然,还有位置的absolute不要忘记

js拖拽分析

标签:window   位置   client   doc   sed   移动   拖拽   style   设置   

原文地址:https://www.cnblogs.com/iDouble/p/8543870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!