分析逻辑关于该过程有一下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. 比特币and区块链

    比特币简介 比特币(Bitcoin:比特金)最早是一种网络虚拟货币,可以购买现实生活当中的物品.它的特点是分散化.匿名.只能在数字世界使用,不属于任何国家和金融机构,并且不受地域的限制,可以在世界上的 ...

  2. JDBC秒变C3P0连接池——再加连接解耦

    从JDBC连接到C3P0数据库连接池 在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");)   ② ...

  3. react开发中的小细节

    目前开始使用react余遇到的问题还不是很多,但还是希望总结一下. react中的属性prop: 在react中组件的父子组件的通信是基于prop的,当然对于底层的东西不是特别了解,但可以说一说它的基 ...

  4. Python之assert断言语句

    关键字assert构成断言语句,主要是可以在我们书写一个新的程序时,可以使用它帮我们锁定bug范围. 表达式: assert 表达式 ‘窗口提示的信息’ 括号中的项目为选填项目,选填项目将会在表达式的 ...

  5. （14）ASP.NET Core 中的日志记录

    1.前言 ASP.NET Core支持适用于各种内置和第三方日志记录提供应用程序的日志记录API.本文介绍了如何将日志记录API与内置提供应用程序一起使用. 2.添加日志提供程序 日志记录提供应用程序 ...

  6. python3学习-logging模块

    1.logging模块的使用非常简单,引入模块就可以使用. import logging logging.debug('This is debug message') logging.info('Th ...

  7. final，权限，引用类型数据

    1. final关键字 1.概述 为了避免子类出现随意改写父类的情况,java提供了关键字final,用于修饰不可改变内容 final:不可改变,可以修饰类,方法和变量 类:被修饰的类,不能用于继承 ...

  8. C#_会员管理系统

    https://www.cnblogs.com/start-from-scratch/p/5420588.html

  9. 100天搞定机器学习|day37 无公式理解反向传播算法之精髓

     100天搞定机器学习(Day1-34) 100天搞定机器学习|Day35 深度学习之神经网络的结构 100天搞定机器学习|Day36 深度学习之梯度下降算法 本篇为100天搞定机器学习之第37天,亦 ...

  10. 【JS档案揭秘】第二集 Event loop与执行栈

    我时常在思考关于JS的很多知识在工作中有什么用?是否只能存在于面试这种理论性的东西中,对于我们的业务和工作,它们又能扮演怎样的角色.以后在JS档案揭秘的每一期里,都会加入我对于业务的思考,让这些知识不 ...