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

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

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

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

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

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

写了个简单的方法：

<style type="text/css">

*{margin: 0; padding: 0;}

 #box{width: 300px; height: 200px; border:1px solid #999; position: fixed; top: 20px; left: 20px;}

 #header{width: 100%; height: 50px; background-color: #999;}

</style>

<body>

<div id="box">

    <div id="header"></div>

    <div>

        <p>2222222222222222222222222222222121212121212</p>

        <p>2222222222222222222222222222222121212121212</p>

        <p>2222222222222222222222222222222121212121212</p>

        <p>2222222222222222222222222222222121212121212</p>

        <p>2222222222222222222222222222222121212121212</p>

    </div>

</div>

<script type="text/javascript">

var box = document.getElementById('box');

var header = document.getElementById('header');

new fnDrag(header,box);

</script>

　

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

/**

 *

 用于拖拽

 *

 @method fnDrag

 *

 @param {DOM} select 点击可触发拖拽的区域

 *

 @param {DOM} container 移动的区域

 *

 created by toMatthew on 17/11/27.

 *

 usage new fnDrag(header, container);

 *

 */

;(function(win, document){

    // 公用方法开始

    // 返回元素位置

    function toBoxPosition(dom, x, y) {

        var moveBox = dom.getBoundingClientRect();///包围盒的信息

        return {x: parseInt(x - moveBox.left), y: parseInt(y - moveBox.top) };

    }

    var fnDrag = function(select, container) {

        var self = this;

        self.select = select;

        self.container = container;

        self.isMouseDown = false;

        self.point = {x:0,y:0};

        self.getPosition = function(e) {

            if(self.isMouseDown) {

                self.container.style.top = parseInt(e.clientY - self.point.y)+'px';

                self.container.style.left = parseInt(e.clientX - self.point.x)+'px';

            }

        }

        self.bodyMove = function(e) {

            e.preventDefault();

            self.getPosition(e);

        }

        self.fnClear = function(e) {

            document.removeEventListener('mousemove', self.bodyMove);

            document.removeEventListener('mouseup', self.fnMouseUp);

            self.select.removeEventListener('mouseout', self.bodyMove);

            self.select.removeEventListener('mouseup', self.fnMouseUp);

        }

        self.fnMouseUp = function(e) {

            if(self.isMouseDown) {

                e.preventDefault();

                self.isMouseDown = false;

                self.fnClear(e);

            }

        }

        // 监听select区域点击

        self.select.addEventListener('mousedown', function(e) {

            e.preventDefault();//阻止默认事件，取消文字选中

            self.isMouseDown = true;

            self.point = toBoxPosition(self.container, e.clientX , e.clientY);

            // 监听body移动

            document.addEventListener('mousemove', self.bodyMove, false);

            // 移出select区域

            self.select.addEventListener('mouseout', self.bodyMove, false);

            // 鼠标抬起

            self.select.addEventListener('mouseup', self.fnMouseUp, false);

            document.addEventListener('mouseup', self.fnMouseUp, false);

        }, false);

    }

    win.fnDrag = fnDrag;

})(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. DFS_全球变暖_蓝桥杯2018省赛N0.9

    你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: ....... .##.... .##.... ....##. ..####. .. ...

  2. Android的简述2

    android提供了三种菜单类型,分别为options menu,context menu,sub menu. options menu就是通过按home键来显示,context menu需要在vie ...

  3. 遇见Python集合类型

    Python目前有两种内置集合类型,set和frozenset. Ⅰ.两者区别 set是可变的,没有哈希值,其内容可以使用add()和remove()这样的方法来改变,所以不能被用作字典的键或其他集合 ...

  4. Android开发进阶——自定义View的使用及其原理探索

    在Android开发中,系统提供给我们的UI控件是有限的,当我们需要使用一些特殊的控件的时候,只靠系统提供的控件,可能无法达到我们想要的效果,这时,就需要我们自定义一些控件,来完成我们想要的效果了.下 ...

  5. 物联网网关MQTT应用与配置测试介绍

    1.MQTT介绍: MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),作为除Modbus外最常用的协议之一,因其基于发布/订阅的模式,具有资源消 ...

  6. StarUML 3.0 破解方法

    首先在我这里下载  StarUML3.0 破解替换文件app.asar 链接:https://pan.baidu.com/s/1wDMKDQkKrE9D1c0YeXz0xg 密码:y65m 然后参照下 ...

  7. 【POJ - 3258】River Hopscotch（二分）

    River Hopscotch 直接中文 Descriptions 每年奶牛们都要举办各种特殊版本的跳房子比赛,包括在河里从一块岩石跳到另一块岩石.这项激动人心的活动在一条长长的笔直河道中进行,在起点 ...

  8. Redis分布式锁实战

    什么是分布式锁 在单机部署的情况下,要想保证特定业务在顺序执行,通过JDK提供的synchronized关键字.Semaphore.ReentrantLock,或者我们也可以基于AQS定制化锁.单机部 ...

  9. snort规则中byte_test参数详解

    例子: byte_test:4,>,1000,20 这里是从本规则内前面匹配的位置结尾开始,向后偏移20个字节,再获取后面的4个字节的数据,与十进制数据1000进行比较,如果大于1000,就命中 ...

  10. 基于tp3.2的腾讯云短信验证码的实现

    新手小白在公司要完成短信验证码注册功能,最初由于没有经验,网上的教程又不是很全,便参考着官方API文档,进行开发 直接进入正题:使用composer下载腾讯云短信接口(记得添加依赖).在项目目录下新建 ...