知识点总结

鼠标拖拽原理:

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  +/-  鼠标移动的距离,其他同理,关键是计算鼠标移动的距离。

滚动条拖拽:

例子一:控制物体的大小

  

例子二:控制文字滚动

  

[妙味DOM]第五课:事件深入应用的更多相关文章

  1. [妙味DOM]第六课:鼠标滚轮和COOKIE

    知识点总结: 鼠标滚轮事件 存在兼容性问题: IE/chorme : onmousewheel FF : DOMMouseScroll,必需用在addEventListener下,例如: if (ob ...

  2. [妙味DOM]第四课:Event-事件详解2

    知识点总结 事件捕获 obj.addEventListener('click',fn,true) 从外往里 obj.addEventListener('click',fn,false) 从里往外(冒泡 ...

  3. [妙味DOM]第三课:Event-事件详解1

    知识点总结 焦点事件 onfocus 获取焦点 onblur 失点焦点 obj.focus() 给指定元素设置焦点 obj.blur() 取消指定元素的焦点 obj.select() 选择指定元素里的 ...

  4. (非妙味3):浏览器window事件:及浏览各种尺寸介绍

    (触发)window.onload;  window.onscroll;   window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部   ...

  5. [妙味 DOM] 第二课:DOM、BOM相关方法及属性

    知识点总结 获取样式.增加样式.删除样式函数的封装 表格 tHead tBodies tFoot rows 行 cells 列 表单 表单可以通过name来获取元素:表单.name值 onchange ...

  6. [妙味DOM]第一课:DOM基础概念、操作

    知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...

  7. DOM(五)事件对象

    浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...

  8. [妙味Ajax]第三课:AJAX跨域解决方案:JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  9. [妙味JS基础]第九课:定时器管理、函数封装

    知识点总结 函数封装 回调函数 实例:抖动函数 获取当前的位置 通过数组来实现,一正一负,直到恢复成0为止. 当前位置与数组中各值相加

随机推荐

  1. 运行Google 官方zxing二维码扫描器

    首先,要去下载Zxing的源码,由于Zxing 的服务内容比较广,我们先把所有的源码都下载下来,使用的时候根据需要加载. 或者从开源中国下载https://www.oschina.net/questi ...

  2. 怎样通过WireShark抓到的包分析出SIP流程图

    WireShark抓到了SIP包, 逐条分析, 看瞎...希望能够写个脚本, 自动生成流程图

  3. shell 分支/循环

    ==)); then patern="Update" else patern="Read" fi in "-h") ] then helpI ...

  4. python 数组过滤

    arr = [1,2,3,4,5,6,7,8,None]arr = [elem for elem in arr if elem != None]

  5. Python网络编程学习_Day9

    一.socketserver实现多并发 socket只能实现单进程通讯,要实现多进程同时和服务端通讯就要使用socketserver. 代码如下: import socket client = soc ...

  6. Git提交到多个远程仓库

    在已经习惯使用git同步写代码,github无疑是最的托管平台,但是国内由于"你懂的"原因,速度很慢,有时无法访问,于是想把自己的代码同步到多个不同的远程仓库备份. 我的主要仓库: ...

  7. Front-End(二)——HTML

    本文主要对html迭代学习中的要点.冷点简述罗列. html之前也说过,主要为了描述页面的结构和内容,合理使用结构化的标签,<h1>.<div>等,有利于前端开发,也有利于搜索 ...

  8. C# 图形普通处理,resize ,水印..

    网站中,对用户图片上传处理是很有必要的.对于一些常用的处理,对图片各种形式的压缩,各种形式的水印. 1.裁剪正方形头像方法 /// <summary> /// 正方型裁剪 /// 以图片中 ...

  9. hdu1116回溯N皇后问题

    题目连接 经过思考,不难发现:恰好N个皇后放在不同行不同列,那么是不是可以转换成N个皇后所在行分别确定(一人一行)的情况下对她们的所在列的枚举. 也就是列的全排列生成问题,我们用c[x]表示x行皇后的 ...

  10. css基础和心得(四)

     现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对 定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位 ...