[转自大神]js拖拽小总结

https://blog.csdn.net/u013040887/article/details/83059094

权侵删

这里写的是一个原生js实现拖拽的效果,首先:

1、实现拖拽的三大事件,是要首先清楚的

onmousedown (鼠标按下的时候)、onmousemove(鼠标移动的时候)、onmouseup(鼠标松开的时候)

2、给目标元素加上onmousedown时间,记录鼠标按下的时候,鼠标距离所在元素的位置(就是鼠标距离所在元素边界的距离left、top)记录为disX、disY。要注意的是,要移动的是这个元素,就要算出鼠标坐标与这个元素边界的距离,拖动过程中,鼠标与元素边界位置距离是不变的。

3、当onmousedown发生后,给document添加onmousemove事件,可以根据一下公司不断刷新目标元素的实时位置
---------------------

目标元素.left = oEvent。clientX - disX + 'px';

目标元素.top = oEvent .clientY - disY + 'px';

4、在onmousemove完成后,给document再添加omouseup时间,取消document的onmousemove时间

过程就是以上3个步骤,直接看原理也许晦涩难懂,这里就用代码来直接显示吧;

var obox = document.getElementById('drag')
//1、给需要移动的元素添加onmousedown事件,给拖动做好准备
obox.onmousedown = function(evt) {
var oEvent = evt || event; //获取事件对象,这个是兼容写法
var disX = oEvent.clientX - parseInt(obox.style.left);
var disY = oEvent.clientY - parseInt(obox.style.top); //这里就解释为什么要给document添加onmousemove时间,原因是如果你给obox添加这个事件的时候,当你拖动很快的时候就很快脱离这个onmousemove事件,而不能实时拖动它
document.onmousemove = function(evt) { //实时改变目标元素obox的位置
var oEvent = evt || event;
obox.style.left = oEvent.clientX - disX + 'px';
obox.style.top = oEvent.clientY - disY + 'px';
}
//停止拖动
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}

上面是就实现拖拽的原理;还有一些原理不清楚就是clientX这些距离问题,我这里用一张图来表示吧

(粗略说一下就是 clientXY就是鼠标的坐标 不考虑页面滚动 disXY就是物体和鼠标之间的距离 offsetLeft和style.left某种程度上一样 就是物体的宽度高度距离父辈的左右距离)

(oEvent=ev||event ev是系统传递过来的变量 前面是考虑到了兼容性的问题 )

[转自大神]js拖拽小总结

在拖拽的过程中,每次都要算出这个top,left只也是很麻烦,在js有几个很好用的属性:

offsetLeft:相对参照物的左边距离
offsetTop:相对参照物的上边距离(就如box.offsetTop,就是相对于父元素上边边距的距离)
offsetWidth:元素节点的宽度(相对于width,但是没有单位)
offsetHeight:元素节点的高度
offsetX:事件对象的属性,用这个属性,就可以不用计算鼠标距离所在元素边界的距离disX的值了,可以直接disX = oEvent.offsetX;得到
offsetY:事件对象的属性,同理offsetX;
offsetParent:参照物父元素
这里要注意的是,offsetLeft / offsetTop 都是只读的

4.clientX 事件属性返回 当事件被触发时 鼠标指针相对于浏览器页面(或客户区)的水平坐标。(相对于页面  不考虑滚动条是否滚动)

5.拖拽时限制条件:

LimitDrag.prototype.fnMove=function (ev){ //继承方法用prototype

     var oEvent=ev||event;
var l=oEvent.clientX-this.disX;
var t=oEvent.clientY-this.disY; if(l<0){ //clientX是此时鼠标的X坐标 disX就是鼠标和div之间(x)的距离 二者一减就是此时div的X坐标
l=0;
}
if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){ //这是她能靠到的最右的距离
//document.documentElement.clientWidth就是可视窗的整个宽度 offsetWidth就是div的宽度 二者一减就是当DIV挨着右窗口时的距离
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px'; }

拖拽 面向对象形式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>diyici</title>
<style>
#div1{ width:200px; height:200px; background:yellow; position:absolute;}
</style>
<script>
window.onload=function(){
new Drag('div1');
} function Drag(id){
var _this=this;
this.disX=0;
this.disY=0; this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function (ev){
_this.fnDown(ev);
} }
Drag.prototype.fnDown=function (ev){
var _this=this;
var oEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function (ev){
_this.fnMove(ev);
}
document.onmouseup=function (){
_this.fnUp();
}
}
Drag.prototype.fnMove=function (ev){
var _this=this;
var oEvent=ev||event;
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
}
Drag.prototype.fnUp=function (){
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head>
<body> <div id="div1"></div> </body>
</html>
上一篇:自己写一个jqery的拖拽插件


下一篇:Windows 7安装软件时无法将注册值写入注册表的处理方法