分析逻辑关于该过程有一下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. chapter02 - 03

    1.分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,并用自己的话总计出这三个文档操作命令的不同之处? 答:cat /etc/ssh/sshd_conf ...

  2. Web容器启动中执行某个Java类

    1.监听(Listener) <!-- 配置监听 --> <listener> <listener-class>com.xian.jdbc.GetPropertie ...

  3. powershell小脚本--批量添加用户属性----导出登录时间

    需求1:某公司所有员工少了MAIL属性,需要批量添加.例如,用户chenyy  添加邮件属性chenyy@xxxx.com 先导出(只导出名字)备用: Get-ADUser -Filter * -Pr ...

  4. Java 设置PDF文档浏览偏好

    在查看PDF文档时,可进行一些浏览偏好设置,例如是否全屏浏览.隐藏或显示菜单栏/工具栏.设置页面布局模式等,下面将通过Java编程的方式来演示如何设置. 使用工具: Free Spire.PDF fo ...

  5. nginx基本运维及常用配置

    nginx基本运维及常用配置 ========================================================== 基本运维 nginx 的启动 nginx -c /p ...

  6. Zookeeper的命令行操作（三）

    Zookeeper的命令行操作 1. ZooKeeper服务命令 在准备好相应的配置之后,可以直接通过zkServer.sh 这个脚本进行服务的相关操作 1. 启动ZK服务: sh bin/zkSer ...

  7. Assign the task HDU - 3974 (dfs序 + 线段树)

    有一家公司有N个员工(从1到N),公司里每个员工都有一个直接的老板(除了整个公司的领导).如果你是某人的直接老板,那个人就是你的下属,他的所有下属也都是你的下属.如果你是没有人的老板,那么你就没有下属 ...

  8. bio,nio,aio学习

    http://qindongliang.iteye.com/blog/2018539 1 同步 指的是用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪 自己上街买衣服,自己亲自干这件事,别的 ...

  9. HTML之必备meta标签

    meta标签写在HTML的<head>中,推荐每个手机H5页面必加以下的代码: <head> <meta charset="UTF-8"> &l ...

  10. 深入理解struts的运行机制

    扫码关注公众号,不定期更新干活 在此申明本博文并非原创,原文:http://blog.csdn.net/lenotang/article/details/3336623,本文章是在此文章基础上进行优化 ...