[妙味DOM]第五课：事件深入应用

知识点总结

鼠标拖拽原理：

1、鼠标按下后开始移动，鼠标抬起停止移动，即onmousedown中要包括onmousemove和onmouseup

2、获取位置的计算：获取鼠标的当前位置－鼠标在物体中的位置（当值不变），可通过ev.clientX(鼠标到可视区) - obj.offsetLeft（物体到可视区）来计算

注意事项：

1、为了防止鼠标移动的过快，需要onmousemove和onmouseup前面使用document

2、因为浏览器自带有对文字移动，对你的移动产生的冲突,因此：

　　在标准浏览器下，需要阻止浏览器的默认行为，即return false;

　　在IE下，在onmousedown中使用setCapture(),获取全局捕获，在onmouseup中使用releaseCapture()，释放全局捕获。

　　setCapturn和releaseCapture只对IE有获，因此还要判断一下，即：

　　if (obj.setCapture) {

　　　　obj.setCapture();

　　}

扩展：

　　限制拖拽范围和磁性吸附

碰撞原理：

　　采用九宫格方式，用四角来进行比较判断是否碰撞。

拖拽改变大小：

1、设定四个边的位置

2、鼠标点击判断在哪个边上

3、在右边或下边，改变宽度或高度，在左边或上边，还需要改变left和top的值，宽度变小，left变大（数值变化是相等的）

　　鼠标down下去时，要把鼠标位置、left/top值、width/height的值都保存起来。

　　鼠标移动的距离＝鼠标当前值 - 鼠标down下去保存起来的值。

　　width＝原始的width +/- 鼠标移动的距离,其他同理，关键是计算鼠标移动的距离。

滚动条拖拽：

例子一：控制物体的大小

例子二：控制文字滚动

转载于:https://www.cnblogs.com/joya0411/p/3567215.html

[妙味DOM]第五课：事件深入应用相关推荐

[妙味Ajax]第三课：AJAX跨域解决方案：JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
Javascript第五章location对象第五课
ECMAScript参考:https://blog.csdn.net/qq_30225725/article/details/88621180 DOM参考:Javascript第五章window对象的 ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂cctv移动端项目
2019独角兽企业重金招聘Python工程师标准>>> 项目介绍妙味课堂仿cctv项目移动端准备工作 viewport 这里根据psd,宽度为640,所以使用了下面的meta & ...
Linux 探索之旅 | 第三部分第五课：延时执行，唯慢不破
-- 作者谢恩铭转载请注明出处内容简介第三部分第五课:延时执行,唯慢不破第三部分第六课预告:第三部分测验题延时执行,唯慢不破上一课 Linux探索之旅 | 第三部分第四课:后台运行及合并 ...
盒子模型代码_果冻公开课第五课：五分钟理清盒模型的前世今生
果冻公开课第五课:五分钟理清盒模型的前世今生在前端程序员眼中,页面其实可以被视为一个个盒子组成的那么,这些盒子是如何构建起整个页面的呢? 动画视频: 如何理解盒子模型文字解析: 在上一节里面我 ...
妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享
<妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

[妙味DOM]第五课：事件深入应用

知识点总结

[妙味DOM]第五课：事件深入应用相关推荐

最新文章

热门文章