分析逻辑关于该过程有一下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. superset安装文档

    1 安装python3.6 yum install epel-release -y yum install https://centos7.iuscommunity.org/ius-release.r ...

  2. Django REST framework的使用简单介绍

    官方文档:https://www.django-rest-framework.org/ GitHub源码:https://github.com/encode/django-rest-framework ...

  3. ajax定义与开发最简五步骤

    ajax是什么? a (async异步)  j (javascript)  a (and)  x (xml)即异步的javascript和xml ajax特点:异步 不刷新整个页面 (局部刷新) we ...

  4. extjs4 表单验证自定义

    extjs4 在验证上面支持的也特别好,他可以使用自带的格式验证,也可以自定义验证 比如:正则验证,密码重复填写对比验证,以及 调用后台方法验证,下面将验证方法统一写出以供参考 function lo ...

  5. 《SpringCloud docker》读书笔记

    yml配置意义 当Ribbon和Eureka配合使用时,会自动将虚拟主机名映射成微服务的网络地址. yml中info可以展示一些信息 server: port: 8000 # 指定端口 spring: ...

  6. Letters Shop

    B. Letters Shop time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  7. C#使用WebClient调用接口

    用于上传图片base64位 private void upLoadCunzai() { errorstring += " upLoadCunzai方法执行成功:用于上传已经存在人员摄像头照片 ...

  8. Cookie＆Session

    Cookie&Session 背景:Cookie和Session的原理.作用及如何设置和相关面试. 一.诞生背景 HTTP是无状态的,即服务器无法知道两个请求是否来自同一个浏览器,也就是服务器 ...

  9. Window.open使用总结

    前言 今天在项目中,突然看到window.open的使用,感觉还是很神奇,突然心血来潮查看了window.open的用法. 用途 主要用于在打开网站时弹出的其他窗口.用于通知广告一类的. 用法 win ...

  10. pythonday02基础与运算符

    今日概要 1.循环 2.字符串格式化 3.运算符 4.编码 if的嵌套 score = input('请输入成绩') score_int = int(score) if score_int >= ...