javascript 怎么判断鼠标拖动方向

JavaScript024

javascript 怎么判断鼠标拖动方向,第1张

原理就是通过比较鼠标的XY坐标来判断。我不知道有没有其他的方式了，就拿知道的来说。下面是实现代码。

<script>

var lastX = null,

lastY = null

window.onmousemove = function(event){

var curX = event.clientX,

curY = event.clientY,

direction = ''

// console.info(event)

// console.info(event.clientX)

// console.info(event.clientY)

// 初始化坐标

if(lastX == null || lastY == null){

lastX = curX

lastY = curY

return

}

if(curX >lastX){

direction += 'X右,'

}else if(curX <lastX){

direction += 'X左,'

}else{

direction += 'X居中,'

}

if(curY >lastY){

direction += 'Y上'

}else if(curY <lastY){

direction += 'Y下'

}else{

direction += 'Y居中'

}

lastX = curX

lastY = curY

console.info(direction)

document.body.innerText = direction

}

</script>

可以用鼠标拖动。

1、异步后台校验不会对用户操作产生阻塞感；2、可在用户停止输入后自动校验，避免频繁进行无谓的后台校验。计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动。