js 实现拖拽元素

JavaScript021

js 实现拖拽元素,第1张

因为需要计算元素的位置变化，所以需要掌握几个关于位置的api

点击需要拖动元素时，获取该元素的初始位置。

鼠标移动期间 获取元素当前的位置信息

计算

进行事件监听

拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；

问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，

解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。

拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）

处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。

正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。

在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>拖拽</title>

<style type="text/css">

*{

margin: 0

padding: 0

}

#box{

width: 500px

height: 500px

border: 1px solid black

}

#block{

width: 50px

height: 50px

background: red

position: absolute

left: 100px

top:100px

}

</style>

</head>

<body>

<div id="box">

<div id="block"></div>

</div>

<script type="text/javascript">

//获得元素

var box=document.getElementById('box')

var block=document.getElementById('block')

function getCss(elmen,css){

return parseInt(window.getComputedStyle ? window.getComputedStyle(elmen,null)[css] : obj.currentStyle[css])

}

block.onmousedown=function(event){

event=window.event || event

var self=this

var x=event.clientX-self.offsetLeft

var y=event.clientY-self.offsetTop

box.onmousemove=function(event){

var moveX=event.clientX-x

var moveY=event.clientY-y

var boxSize=getCss(box,'width')

var blockSize=getCss(block,'width')

if(moveX>=(boxSize-blockSize)){moveX=boxSize-blockSize}

if(moveX<=0){moveX=0}

if(moveY<0){moveY=0}

if(moveY>=(boxSize-blockSize)){moveY=boxSize-blockSize}

block.style.left=moveX+'px'

block.style.top=moveY+'px'

}

}

block.onmouseup=function(){

box.onmousemove=null

}

</script>

</body>

</html>