js拖拽分析

Posted 决起而飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js拖拽分析相关的知识,希望对你有一定的参考价值。

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拖拽分析的主要内容,如果未能解决你的问题,请参考以下文章

js实现拖拽

简单拖拽即生成网页 VvvebJs

html5 Sortable.js 源码分析

安全测试 web安全测试 常规安全漏洞 可能存在SQL和JS注入漏洞场景分析。为什么自己没有找到漏洞,哪么可能存在漏洞场景是?SQL注入漏洞修复 JS注入漏洞修复 漏洞存在场景分析和修复示例(代码片段

js拖拽效果的原理及实现

JS拖拽元素原理及实现代码