分析逻辑关于该过程有一下3个动作

1、点击 2、移动 3、释放鼠标

1、点击时获得点击下去的一点的坐标（盒子的top，left），去除默认事件。

2、移动时不断改变盒子的坐标。（移动的dom目标应该为document不然容易被甩出去）。

3、鼠标释放。清除document的时间。还有改变位置。

4、注意如果鼠标在点击目标时速度太快离开了目标，要马上纠正。

写了个简单的方法：

  1. <style type="text/css">
  2. *{margin: 0; padding: 0;}
  3.  #box{width: 300px; height: 200px; border:1px solid #999; position: fixed; top: 20px; left: 20px;}
  4.  #header{width: 100%; height: 50px; background-color: #999;}
  5. </style>
  6. <body>
  7. <div id="box">
  8.     <div id="header"></div>
  9.     <div>
  10.         <p>2222222222222222222222222222222121212121212</p>
  11.         <p>2222222222222222222222222222222121212121212</p>
  12.         <p>2222222222222222222222222222222121212121212</p>
  13.         <p>2222222222222222222222222222222121212121212</p>
  14.         <p>2222222222222222222222222222222121212121212</p>
  15.     </div>
  16. </div>
  17. <script type="text/javascript">
  18. var box = document.getElementById('box');
  19. var header = document.getElementById('header');
  20. new fnDrag(header,box);
  21. </script>

　

这是我简单分装的一个方法：

  1. /**
  2.  *
  3.  用于拖拽
  4.  *
  5.  @method fnDrag
  6.  *
  7.  @param {DOM} select 点击可触发拖拽的区域
  8.  *
  9.  @param {DOM} container 移动的区域
  10.  *
  11.  created by toMatthew on 17/11/27.
  12.  *
  13.  usage new fnDrag(header, container);
  14.  *
  15.  */
  16. ;(function(win, document){
  17.     // 公用方法开始
  18.     // 返回元素位置
  19.     function toBoxPosition(dom, x, y) {
  20.         var moveBox = dom.getBoundingClientRect();///包围盒的信息
  21.         return {x: parseInt(x - moveBox.left), y: parseInt(y - moveBox.top) };
  22.     }
  23.  
  24.     var fnDrag = function(select, container) {
  25.         var self = this;
  26.         self.select = select;
  27.         self.container = container;
  28.         self.isMouseDown = false;
  29.         self.point = {x:0,y:0};
  30.  
  31.         self.getPosition = function(e) {
  32.             if(self.isMouseDown) {
  33.                 self.container.style.top = parseInt(e.clientY - self.point.y)+'px';
  34.                 self.container.style.left = parseInt(e.clientX - self.point.x)+'px';
  35.             }
  36.         }
  37.  
  38.         self.bodyMove = function(e) {
  39.             e.preventDefault();
  40.             self.getPosition(e);
  41.         }
  42.  
  43.         self.fnClear = function(e) {
  44.             document.removeEventListener('mousemove', self.bodyMove);
  45.             document.removeEventListener('mouseup', self.fnMouseUp);
  46.             self.select.removeEventListener('mouseout', self.bodyMove);
  47.             self.select.removeEventListener('mouseup', self.fnMouseUp);
  48.         }
  49.  
  50.         self.fnMouseUp = function(e) {
  51.             if(self.isMouseDown) {
  52.                 e.preventDefault();
  53.                 self.isMouseDown = false;
  54.                 self.fnClear(e);
  55.             }
  56.         }
  57.  
  58.         // 监听select区域点击
  59.         self.select.addEventListener('mousedown', function(e) {
  60.             e.preventDefault();//阻止默认事件，取消文字选中
  61.             self.isMouseDown = true;
  62.             self.point = toBoxPosition(self.container, e.clientX , e.clientY);
  63.  
  64.             // 监听body移动
  65.             document.addEventListener('mousemove', self.bodyMove, false);
  66.  
  67.             // 移出select区域
  68.             self.select.addEventListener('mouseout', self.bodyMove, false);
  69.  
  70.             // 鼠标抬起
  71.             self.select.addEventListener('mouseup', self.fnMouseUp, false);
  72.             document.addEventListener('mouseup', self.fnMouseUp, false);
  73.  
  74.         }, false);
  75.     }
  76.  
  77.     win.fnDrag = fnDrag;
  78. })(window, document);

　　

div拖拽的更多相关文章

  1. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  2. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  3. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  4. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  5. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  6. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  7. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  8. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  10. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

随机推荐

  1. LinkedList实现类

    List还有一个LinkedList的实现,它是一个基于链表实现的List类,对于顺序访问集合中的元素进行了优化,特别是当插入.删除元素时速度非常快.因为LinkedList即实现了List接口,也实 ...

  2. 【iOS】Xcode 使用 CocoaPods 导入第三方库后没有提示

    Github 上下载的开源项目,运行后出现的 [iOS]build diff: /../Podfile.lock: No such file or directory 解决后,又出现了这个问题. 解决 ...

  3. 动态开内存(malloc与calloc)

    malloc与calloc 1.函数原型 #include<stdlib.h> void *malloc(unsigned int size);     //申请size字节的内存 voi ...

  4. Docker入门学习笔记

    Docker 什么是Docker 虚拟化技术 在计算机中,虚拟化是一种资源管理技术,将计算机中的各种实体资源如:CPU.硬盘.内存等予以抽象.转换后呈现出来打破实体结构间的不可切割的障碍,使用户可以比 ...

  5. 一文了解：Redis基础类型

    Redis基础类型 Redis特点 开源的,BSD许可高级的key-value存储系统 可以用来存储字符串,哈希结构,链表,集合 安装 windows:https://github.com/micro ...

  6. python_0基础学习_day02

    第二节 一,while while也称为无限循环.死循环 while 条件: 缩进 循环体 应用领域:音乐播放:单曲循环,列表循环,随机播放(也是有规律的) 登陆界面:…… 数学计算:1~100的和, ...

  7. CSS等分布局方法

    原文链接:http://caibaojian.com/css-equal-layout.html CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性. 一:浮动布局+百 ...

  8. android ——网络编程

    一.WebView 这个View就是一个浏览器,用于展示网页的. 布局文件: <LinearLayout xmlns:android="http://schemas.android.c ...

  9. 谈谈我对Ext的认识，元芳，你怎么看

    实用Ext第一步当然是引用jar包啦. 下载地址 在页面上加上div用于显示这也是必须的 <div id='loginpanel' ></div> 在js中我们肯定需要将Ext ...

  10. Flink 源码解析 —— 如何获取 JobGraph？

    JobGraph https://t.zsxq.com/naaMf6y 博客 1.Flink 从0到1学习 -- Apache Flink 介绍 2.Flink 从0到1学习 -- Mac 上搭建 F ...