js实现鼠标拖拽功能基本思路

如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。

onmousedown：鼠标按下事件
onmousemove：鼠标移动事件
onmouseup：鼠标抬起事件

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

基本思路如下：

[html] view plaincopy

拖拽状态 = 0鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}

部分实例代码：

HTML部分

[html] view plaincopy

<div class="calculator" id="drag">**********</div>

CSS部分

[html] view plaincopy

.calculator {
position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/
display: block;
width: 218px;
height: 280px;
cursor: move; /*鼠标呈拖拽状*/
}

js部分

[html] view plaincopy

window.onload = function() {
//拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup)
var drag = document.getElementById('drag');
//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function(e) {
var e = e || window.event; //兼容ie浏览器
var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，
解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法，
可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，
限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/
if(typeof drag.setCapture!='undefined'){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //兼容ie浏览器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移动时重新得到物体的距离，解决拖动时出现晃动的现象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};
document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
this.onmousemove = null;
this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
//修复低版本ie bug
if(typeof drag.releaseCapture!='undefined'){
drag.releaseCapture();
}
};
};
};

源码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.calculator {position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/
            display: block;width: 218px;height: 280px;cursor: move;   /*鼠标呈拖拽状*/
        }</style>
</head>
<body>
<div class="calculator" id="drag">**********</div>
</body>
</html><script>window.onload = function() {//拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup)
                var drag = document.getElementById('drag');//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
                drag.onmousedown = function(e) {var e = e || window.event; //兼容ie浏览器
                    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                    var diffY = e.clientY - drag.offsetTop;/*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，
                     解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法，
                     可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，
                     限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/
                    if(typeof drag.setCapture!='undefined'){drag.setCapture();}document.onmousemove = function(e) {var e = e || window.event; //兼容ie浏览器
                        var left=e.clientX-diffX;var top=e.clientY-diffY;//控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
                        if(left<0){//left=0;
                        }else if(left >window.innerWidth-drag.offsetWidth){left = window.innerWidth-drag.offsetWidth;//left = window.innerWidth;
                        }if(top<0){//top=0;
                        }else if(top >window.innerHeight-drag.offsetHeight){top = window.innerHeight-drag.offsetHeight;//top = window.innerHeight;
                        }//移动时重新得到物体的距离，解决拖动时出现晃动的现象
                        drag.style.left = left+ 'px';drag.style.top = top + 'px';};document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动
                        this.onmousemove = null;this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）

                        //修复低版本ie bug
                        if(typeof drag.releaseCapture!='undefined'){drag.releaseCapture();}};};};</script>

js实现鼠标拖拽功能基本思路相关推荐

html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
vue项目实现鼠标拖拽功能
<divid="back"@mousedown="draggableFun($event)"></div> //e.clientX和e. ...
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值). 编写HTML,设计弹框用于实现拖拽特效. 为拖拽条添加mousedown事件 ...
js实现鼠标拖拽效果
初步 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...

js实现鼠标拖拽功能基本思路

js实现鼠标拖拽功能基本思路相关推荐

最新文章

热门文章