分析逻辑关于该过程有一下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. Java8中的流操作-基本使用&性能测试

    为获得更好的阅读体验,请访问原文:传送门 一.流(Stream)简介 流是 Java8 中 API 的新成员,它允许你以声明式的方式处理数据集合(通过查询语句来表达,而不是临时编写一个实现).这有点儿 ...

  2. Jenkins安装插件问题

    最近在电脑尝试安装Jenkins软件 安装插件的时候 一直报错 没有推荐插件提示一直报错 at java.lang.Thread.run(Unknown Source) Caused by: java ...

  3. 03、Swagger2和Springmvc整合详细记录（爬坑记录）

    时间 内容 备注 2018年6月18日 基本使用 spirngmvc整合swagger2 开始之前这个系列博文基本是,在项目的使用中一些模块的内容记录,但是后期逐渐优化,不单单是整合内容. swagg ...

  4. Pipeline 模型

    解决的问题 解决并发效率问题,将任务拆分成流水线,然后多线程并发执行,比之单线程执行快. 案例 CPU 流水线 Tomcat 容器 Structs

  5. jQuery中的append中含有onClick的问题

    在jQuery中,当append中含有onClick时,点击事件无效果.需要在append完之后再额外绑定点击事件.

  6. 页面性能监控之performance

    页面性能监测之performance author: @TiffanysBear 最近,需要对业务上的一些性能做一些优化,比如降低首屏时间.减少核心按钮可操作时间等的一些操作:在这之前,需要建立的就是 ...

  7. IntelliJ IDEA 激活（最新）

    注:此文以 Mac 为例,Windows 的激活方法也大同小异.如果不差钱的话,建议购买正版! 1.下载安装 直接通过下面的链接到官网下载最新的 Ultimate 版本即可: https://www. ...

  8. Kafka 系列（二）—— 基于 ZooKeeper 搭建 Kafka 高可用集群

    一.Zookeeper集群搭建 为保证集群高可用,Zookeeper 集群的节点数最好是奇数,最少有三个节点,所以这里搭建一个三个节点的集群. 1.1 下载 & 解压 下载对应版本 Zooke ...

  9. 程序员的专属微信公众号编辑器：定制 Markdown 转 HTML

    效果(Gif) 点击我查看 仓库地址 https://github.com/cdk8s/cdk8s-markdown-to-html https://gitee.com/cdk8s/cdk8s-mar ...

  10. spring-boot-plus后台快速开发脚手架之代码生成器使用(十)

    spring-boot-plus 代码生成 Generator 代码生成内容 spring-boot-plus在mybatis-plus基础上,新增param/vo等模板 拓展controller/s ...