用JavaScript原生手写div的鼠标拖拽功能

一、三个事件onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标松）
鼠标按下时

box.onmousedown = function(e) {console.log("e.clientX",box.offsetLeft);console.log("e.clientY",box.offsetTop);var e = e || window.event; //要用event这个对象来获取鼠标的位置x = e.clientX - box.offsetLeft;y = e.clientY - box.offsetTop;isDrop = true; //设为true表示可以移动
}

二、得到box盒子离左侧x和上侧的距离y

document.onmousemove = function(e) {//是否为可移动状态                　　　　　　　　　　　 　　　　　　　if(isDrop) {　　　　var e = e || window.event;                    　　var moveX = e.clientX - x; //得到距离左边移动距离                    　　var moveY = e.clientY - y; //得到距离上边移动距离//可移动最大距离var maxX = document.documentElement.clientWidth - box.offsetWidth;var maxY = document.documentElement.clientHeight - box.offsetHeight;//范围限定  当移动的距离最小时取最大  移动的距离最大时取最小//范围限定方法一/*if(moveX < 0) {moveX = 0} else if(moveX > maxX) {moveX = maxX;}if(moveY < 0) {moveY = 0;} else if(moveY > maxY) {moveY = maxY;}　*///范围限定方法二　moveX=Math.min(maxX, Math.max(0,moveX));moveY=Math.min(maxY, Math.max(0,moveY));box.style.left = moveX + "px";　　box.style.top = moveY + "px";　　　　　　　　　　} else {return;　　　　　　　　　　}}

三、鼠标移动时
为了防止鼠标移动过快事件无法正确处理所以事件绑定到document上
四、鼠标松开时
为了放置鼠标移动过快时间无法正确处理所以事件绑定到document上

五、可以这样表示范围限定

//范围限定  最小取最大  最大取最小
if(moveX < 0) {moveX= Math.max(0,moveX)//0}else if(moveX>maxX){moveX=Math.min(moveX,maxX);//maxX}if(moveY < 0) {moveY= Math.max(0,moveY) //0}else if(moveY>maxY){moveY=Math.min(moveY,maxY); //maxY}

document.onmouseup = function() {isDrop = false; //设置为false不可移动
}

 document.onmousemove

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box {position: absolute;width: 200px;height: 200px;background: red;}</style></head><body><div class="box"><p>sfsdfsdfsdfsdfsdfsf</p></div><script>var box = document.getElementsByClassName("box")[0]; //获取元素var x, y; //鼠标相对与div左边，上边的偏移var isDrop = false; //移动状态的判断鼠标按下才能移动box.onmousedown = function(e) {console.log("e.clientX",box.offsetLeft);console.log("e.clientY",box.offsetTop);var e = e || window.event; //要用event这个对象来获取鼠标的位置x = e.clientX - box.offsetLeft;y = e.clientY - box.offsetTop;isDrop = true; //设为true表示可以移动}document.onmousemove = function(e) {//是否为可移动状态                　　　　　　　　　　　 　　　　　　　if(isDrop) {　　　　var e = e || window.event;                    　　var moveX = e.clientX - x; //得到距离左边移动距离                    　　var moveY = e.clientY - y; //得到距离上边移动距离//可移动最大距离var maxX = document.documentElement.clientWidth - box.offsetWidth;var maxY = document.documentElement.clientHeight - box.offsetHeight;//范围限定  当移动的距离最小时取最大  移动的距离最大时取最小//范围限定方法一，选其中一种/*if(moveX < 0) {moveX = 0} else if(moveX > maxX) {moveX = maxX;}if(moveY < 0) {moveY = 0;} else if(moveY > maxY) {moveY = maxY;}　*///范围限定方法二　moveX=Math.min(maxX, Math.max(0,moveX));moveY=Math.min(maxY, Math.max(0,moveY));box.style.left = moveX + "px";　　box.style.top = moveY + "px";　　　　　　　　　　} else {return;　　　　　　　　　　}}document.onmouseup = function() {isDrop = false; //设置为false不可移动}</script></body></html>

用JavaScript原生手写div的鼠标拖拽功能相关推荐

js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
vue项目实现鼠标拖拽功能
<divid="back"@mousedown="draggableFun($event)"></div> //e.clientX和e. ...
python鼠标拖拽功能_selenium鼠标移动、拖拽、双击、长按等操作
selenium鼠标操作靠的是ActionChains(行为链)类,前面的文章我们已经介绍过,详情可以看ActionChains类,selenium的鼠标操作就不一一举例了,本节把鼠标移动.拖拽.双击 ...
Unity 鼠标拖拽功能
继承3个处理拖拽方法的接口IBeginDragHandler, IDragHandler, IEndDragHandler /// <summary>/// 实现接口的OnBeginDra ...
js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
实现的原理: 根据上面的图可以算出移动后的盒子的left和top: 鼠标距离边界的值: ev.pageY - box.top ev.pageX - box.left box2.top = ev2.pa ...
python鼠标拖拽功能_Python wxpython模块响应鼠标拖动事件操作示例
本文实例讲述了Python wxpython模块响应鼠标拖动事件操作.分享给大家供大家参考,具体如下: wxpython鼠标拖动事件小案例: #coding:UTF-8 import wx app = ...
python模拟拖拽文件_python 基于selenium实现鼠标拖拽功能
1.准备html文件首先我们需要准备一个鼠标滑动的html文件,用来演示鼠标滑动的效果,注意需要将我们的html文件放在自己的服务器上, 这样我们才能够通过selenium来进行验证.html文件如 ...
【WPF】鼠标拖拽功能DragOver和Drop
在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...

用JavaScript原生手写div的鼠标拖拽功能

用JavaScript原生手写div的鼠标拖拽功能相关推荐

最新文章

热门文章