理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一、实现的效果是在限制范围内拖拽div+吸附+事件捕获。
这里需要理解的是事件捕获，这个事件捕获也是为了兼容div在拖拽过程中，文本不被选中这个问题。
如此良辰美景，拖拽也可以很洒脱哈。先看看图，
二、一步步的实现这个拖拽过程的几个要求
（一）拖拽起来
里面的边框是表示页面哦（我们的屏幕所能看到的东东）。
获取移动距离的思路：
记录鼠标按下和鼠标抬起两次的坐标，然后相减，再加上div跟边缘之间的间距。就得到移动距离。
之前我也在这里困惑了，不明白为什么还要再加上offsetLeft。原因就是clientX获取到的是数值是不加上div跟边缘的距离，不是marin，也不是padding，而是浏览器渲染的问题。
[下面是我自己的理解：
终于明白这个移动距离是如何计算出来的：
将式子化简之后，得到的就是移动后的Div clientX-移动前clientX，然后再加上offsetLeft，因为这个clientX是没有把边缘计算下去，为了获取准确的数值，要把浏览器默认的边缘计算下去。
如图所以：鼠标移动过的距离就是我用红色画出部分再加上div跟边缘之间的offsetLeft（X轴方向）和offsetTop（Y轴方向）。
如果上面式子不好理解，就把他化简之后来看，就明白了。]
距离获取完成。
现在就可以通过鼠标的三个事件onmousedown、onmousemove、onmouseup来拖拽鼠标。当鼠标移动时，就不断地更改div的left和top属性
oDiv2.style.left = l +'px';
Div2.style.top = t +'px';
最后，当鼠标抬起时，要释放onmousedown和onmousemove事件。
this.onmousedown = null;
this.onmousemove = null;
（二）边缘吸附
边缘吸附的原理so easy。
给一个判断条件，当div运动到距离上下左右边缘的距离小于某一个值时，这时就把left和top的值更改为边缘的值。这样div就贴到边缘上去。
var l1= oDiv1.offsetWidth - oDiv2.offsetWidth; //限制小div在大div中拖拽,计算能拖拽的max距离
var t1 = oDiv1.offsetHeight - oDiv2.offsetHeight;
if(l > l1-50)
{
l = l1;
}
if(l <)
{
l = 0;
}
if(t > t1-50)
{
t = t1;
}
if(t <)
{
t = 0;
}
（三）拖拽过程不被文字选中
div在拖拽过程中，在div中的文本文字总是会被选中，为了解决这个问题，要使用一个叫做事件捕获的知识。
1、先理解一下什么是事件捕获
是跟事件冒泡相反的一种模型。事件捕获的是最后获得事件的是最小的子元素。事件冒泡最后获得事件的是父元素。
之所以在拖拽过程中，div中的文字会被选中就是因为我没有处理好事件冒泡的问题。要解决这个问题，解铃还须系铃人，就把事件冒泡的问题处理好久ok。
if(oDiv2.setCapture) //IE
{
document.onmousemove = moveFn;
document.onmouseup = upFn; oDiv2.setCapture(); //事件捕获后，所有事件都集中到这个div return false; //FF、Chrome、IE9
}else //FF、chrome
{
document.onmousemove = moveFn; //！！！！根源所在，在优化版1中，设置为oDiv2.onmousemove时拖拽一次后无法再拖拽
document.onmouseup = upFn;
}
记得事件捕获后，当鼠标抬起时，也好释放
oDiv2.releaseCapture();
三、div拖拽的详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>限制范围内拖拽</title>
<style>
*
{
margin: 0;
padding: 0;
}
#div1
{
width: 500px;
height: 500px;
background: #CCC;
position: relative;
}
#div2
{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function()
{
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); var disX,disY;
/*--------------开始拖拽div2-----------------*/
oDiv2.onmousedown = function(evt) //oDiv2.onmousedown表示按下这个对象，， document.onmouseup整个文档对象(这里把div改成document是防止弄丢div)
{
var oEvent = evt || window.event; //evt兼容FF/Chrome disX = oEvent.clientX - oDiv2.offsetLeft; //-oDiv2.offsetLeft的距离是为了减去div与视口边框的距离
disY = oEvent.clientY - oDiv2.offsetTop; if(oDiv2.setCapture) //IE
{
document.onmousemove = moveFn;
document.onmouseup = upFn; oDiv2.setCapture(); //事件捕获后，所有事件都集中到这个div return false; //FF、Chrome、IE9
}else //FF、chrome
{
document.onmousemove = moveFn; //！！！！根源所在，在优化版1中，设置为oDiv2.onmousemove时拖拽一次后无法再拖拽
document.onmouseup = upFn;
} function moveFn(evt) //把document重新改为div，利用setCapture事件捕获，把事件都集中在一个物体上
{
var oEvent = evt || window.event;
var l = oEvent.clientX - disX; //计算鼠标移过的距离
var t = oEvent.clientY - disY; var l1= oDiv1.offsetWidth - oDiv2.offsetWidth; //限制小div在大div中拖拽,计算能拖拽的max距离
var t1 = oDiv1.offsetHeight - oDiv2.offsetHeight;
if(l > l1-50)
{
l = l1;
}
if(l < 50)
{
l = 0;
}
if(t > t1-50)
{
t = t1;
}
if(t < 50)
{
t = 0;
} oDiv2.style.left = l +'px';
oDiv2.style.top = t +'px';
} function upFn()
{
this.onmousedown = null;
this.onmousemove = null; if(oDiv2.releaseCapture) //如果事件捕获存在，则释放事件捕获
{
oDiv2.releaseCapture();
}
} return false; //阻止浏览器默认事件
};
};
</script>
</head>
<body>
<div id="div1">使用了事件捕获后，现在拖拽div中的问题可不应该被选中了哦</div>
<div id="div2">helloworld helloworld</div>
</body>
</html>
[题外话：优化版拖拽再次无法拖拽（已解决：原因是document和oDiv2.onmousemove的问题）]
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获的更多相关文章
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 简洁的drag效果，自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
- JS拖拽div（移动）
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 可拖拽div
在开发的时候需要一个可拖拽的prompt弹框.自己写了一个,大概思路为: 1.获取鼠标左键按下移动的起点坐标(x,y). 2.获取div的left和top属性. 3.得到鼠标坐标到左上角的距离(x-t ...
- Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript 事件对象进阶（一）拖拽的原理
拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候 ...
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- 点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 自由拖拽DIV实现
最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...
随机推荐
- KVO与KVC初步了解
参考: http://magicalboy.com/kvc_and_kvo/ http://www.mamicode.com/info-detail-515516.html KVC,即是指 NSKey ...
- ADS的默认连接分析及编译器产生符号解惑
ADS的默认连接顺序是怎样的呢?例如下边从2440init.s中摘出的编译器符号又该怎样理解呢? BaseOfROM DCD |Image##RO##Base| TopOfROM ...
- 我终于忍不住喷一下某些书了，关于Java传引用的XX言论
凡是说Java对象传的是引用,简直一派胡言,尤其误导我这种Java初学者,更严重的是以前用过C++的Java初学者. 我们都知道Java建立对象一般都是需要这样的格式: Object obj = ne ...
- 关于js小数计算的问题
在js浮点运算中 var a=0.2-0.1; var b=0.3-0.2; console.log(a==b); 答案是什么呢,很多人可能认为是true,包括我在内,但是当我写出来运行了一下,我被答 ...
- MySQL安装(以程序的方式启动)zip版
电脑环境 win10 64位 企业版 1.解压zip文件到某路径下. 2.复制目录下的my-default.ini 改名字(my.ini) 3.打开my.ini [mysqld]下面加上charact ...
- form表单提交的方法
最近研究了下html中,form保单提交的几种方法,现与大家分享一下(注:网上可能已经有好多版本了,这里自己写下来做个总结了,哈!): 方法一:利用form的onsubmit()函数(经常使用) &l ...
- Stanford CoreNLP--Split Sentence
分句功能参考 Stanford Tokenizer. 在edu.stanford.nlp.pipeline包中实现了一系列分词分句功能,其中SentenceAnnotator类实现了对文件分句功能. ...
- Sectong日志分析
http://tech.uc.cn/?p=2866#comments http://blog.sectong.com/blog/hw_bigdata.html
- [转贴]xcode帮助文档
突然间得到了一台MAC ,这时候不学OC 更待何时学呀?马上找了IOS开发的书和网上的帖子看,最近在开源力量那里看了TINYFOOL的入门讲座,讲的都很虚,可能时间不够吧,也没看到什么例子呀,什么的, ...
- [转贴]从零开始学C++之STL（二）：实现一个简单容器模板类Vec（模仿VC6.0 中 vector 的实现、vector 的容量capacity 增长问题）
首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下: C++ Code 1 2 template < class _Ty, cl ...