空闲时间，同事让帮忙整个JS拖拽div模块功能。于是便在网上搜索，总结如下一个可实现多div模块拖拽的功能。一下是整体的HTML代码，

里边可以控制到 拖拽开始（onStart），拖拽时候（onMove），拖拽结束（onStop）三个时候的准确状态值及坐标

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽库</title>

<style type="text/css">

	div,h2,p{margin:0;padding:0;}

	body{font:14px/1.5 arial;}

	#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}

	#box .title{height:25px;background:#f60;}

	#box2{width:100px;height:100px;background:#fef4eb;padding:5px;margin:100px;border:1px solid #f60;}

	#box2 .title{height:25px;background:#f60;}

	#tool{margin-bottom:10px;}

</style>

<script type="text/javascript">

function Drag()

{

	 //初始化

	 this.initialize.apply(this, arguments)

}

Drag.prototype = {

 //初始化

 initialize : function (drag, options)

 {

	 this.drag = this.$(drag);

	 this._x = this._y = 0;

	 this._moveDrag = this.bind(this, this.moveDrag);

	 this._stopDrag = this.bind(this, this.stopDrag);

	 this.setOptions(options);

	 this.handle = this.$(this.options.handle);

	 this.maxContainer = this.$(this.options.maxContainer);

	 this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;

	 this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;

	 this.limit = this.options.limit;

	 this.lockX = this.options.lockX;

	 this.lockY = this.options.lockY;

	 this.lock = this.options.lock;

	 this.onStart = this.options.onStart;

	 this.onMove = this.options.onMove;

	 this.onStop = this.options.onStop;

	 this.handle.style.cursor = "move";

	 this.changeLayout();

	 this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))

 },

 changeLayout : function ()

 {

	 this.drag.style.top = this.drag.offsetTop + "px";

	 this.drag.style.left = this.drag.offsetLeft + "px";

	 this.drag.style.position = "absolute";

	 this.drag.style.margin = "0"

 },

	startDrag : function (event)

 {

	 var event = event || window.event;

	 this._x = event.clientX - this.drag.offsetLeft;

	 this._y = event.clientY - this.drag.offsetTop;

	 this.addHandler(document, "mousemove", this._moveDrag);

	 this.addHandler(document, "mouseup", this._stopDrag);

	 event.preventDefault && event.preventDefault();

	 this.handle.setCapture && this.handle.setCapture();

	 this.onStart()

 },

 moveDrag : function (event)

 {

	 var event = event || window.event;

	 var iTop = event.clientY - this._y;

	 var iLeft = event.clientX - this._x;

	 if (this.lock) return;

	 this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));

	 this.lockY || (this.drag.style.top = iTop + "px");

	 this.lockX || (this.drag.style.left = iLeft + "px");

	 event.preventDefault && event.preventDefault();

	 this.onMove()

 },

 stopDrag : function ()

 {

	 this.removeHandler(document, "mousemove", this._moveDrag);

	 this.removeHandler(document, "mouseup", this._stopDrag);

	 this.handle.releaseCapture && this.handle.releaseCapture();

	 this.onStop()

 },

 //参数设置

 setOptions : function (options){

	this.options = {

	  handle:  this.drag, //事件对象

	  limit:  true, //锁定范围

	  lock:  false, //锁定位置

	  lockX:  false, //锁定水平位置

	  lockY:  false, //锁定垂直位置

	  maxContainer: document.documentElement || document.body, //指定限制容器

	  onStart: function () {}, //开始时回调函数

	  onMove:  function () {}, //拖拽时回调函数

	  onStop:  function () {} //停止时回调函数

	};

	for (var p in options) this.options[p] = options[p]

 },

 //获取id

 $ : function (id){

		return typeof id === "string" ? document.getElementById(id) : id

  },

 //添加绑定事件

 addHandler : function (oElement, sEventType, fnHandler) {

	 return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)

 },

 //删除绑定事件

 removeHandler : function (oElement, sEventType, fnHandler) {

	return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)

 },

 //绑定事件到对象

 bind : function (object, fnHandler) {

	return function () {

		return fnHandler.apply(object, arguments)

		}

	}

};

//应用

window.onload = function (){

	 var oBox = document.getElementById("box");

	 var oTitle = oBox.getElementsByTagName("h2")[0];

	 var oSpan = document.getElementsByTagName("span")[0];

	 var oDrag = new Drag(oBox, {handle:oTitle, limit:false});

	 var oBox2 = document.getElementById("box2");

	 var oTitle2 = oBox2.getElementsByTagName("h2")[0];

	 var oSpan2 = document.getElementsByTagName("span")[0];

	 var oDrag2 = new Drag(oBox2, {handle:oTitle2, limit:false});

	 var aInput = document.getElementsByTagName("input");

	 //锁定范围接口

	 aInput[0].onclick = function (){

		 oDrag.limit = !oDrag.limit;

		 this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"

	 };

	 //水平锁定接口

	 aInput[1].onclick = function () {

		 oDrag.lockX = !oDrag.lockX;

		 this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"

	 };

	 //垂直锁定接口

	 aInput[2].onclick = function (){

		 oDrag.lockY = !oDrag.lockY;

		 this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"

	 };

	 //锁定位置接口

	 aInput[3].onclick = function () {

		 oDrag.lock = !oDrag.lock;

		 this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"

	 };

	 //开始拖拽时方法

	 oDrag.onStart = function ()  {

		oSpan.innerHTML = "开始拖拽"

	 };

	 //开始拖拽时方法

	 oDrag.onMove = function () {

		oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop

	 };

	 //结束拖拽时方法

	 oDrag.onStop = function () {

		oSpan.innerHTML = "结束拖拽了"

	 };

};

</script>

</head>

<body>

	<div id="tool">

		  <input type="button" value="锁定范围" />

		  <input type="button" value="水平锁定" />

		  <input type="button" value="垂直锁定" />

		  <input type="button" value="锁定位置" />

	</div>

	<p>拖放状态：<span>未开始</span></p>

	<div id="box">

		<h2 class="title">我是第一个模块</h2>

	</div>

	<div id="box2">

	 <h2 class="title">我是第二个模块</h2>

	</div>

</body>

</html>

　　以后还会更新...

记录以备后期使用

JS实现多Div模块拖拽功能的更多相关文章

  1. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  2. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  3. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  4. jquery实现对div的拖拽功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  6. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  7. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  8. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  9. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

随机推荐

  1. memset, fill 对bool，int 赋值的效率

    memset对bool型变量赋false比对int型变量赋0快了10倍 fill对bool型变量赋false和对int型变量赋0效率一样 fill对int型变量赋0比memset对int型变量赋0慢了 ...

  2. 实验报告一 &第三周课程总结

    实验报告 1.打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 实验代码: public class wdnmd{ publ ...

  3. PyTorch笔记之 squeeze() 和 unsqueeze()

    1.squeeze() 函数 squeeze() 用来去掉向量的一个维度,只有维度为 1 的那一维才能去掉 example: 初始化1个向量shape为(1,2,3)的向量 import torch ...

  4. g50打开无线设置 fn+f7

  5. （4.30）全面了解触发器：DML、DDL、LOGON触发器

    DML.DDL.LOGON触发器 转自:https://www.cnblogs.com/seusoftware/p/9120632.html 触发器可以理解为由特定事件触发的存储过程, 和存储过程.函 ...

  6. BZOJ4753: [Jsoi2016]最佳团体（分数规划+树上背包）

    BZOJ4753: [Jsoi2016]最佳团体(分数规划+树上背包) 标签:题解 阅读体验 BZOJ题目链接 洛谷题目链接 具体实现 看到分数和最值,考虑分数规划 我们要求的是一个\(\dfrac{ ...

  7. CentOS6.4下Mysql数据库的安装与配置,导入数据库,授权远程ip

    卸载掉原有mysql 由于mysql数据库在Linux上实在是太流行了,所以眼下下载的主流Linux系统版本号基本上都集成了mysql数据库在里面,我们能够通过例如以下命令来查看我们的操作系统上是否已 ...

  8. .NET平台 C# ASP.NET

    .NET 平台 根据微软的定义: .NET is a“ revolutionary new platform, built on open Internet protocols and standar ...

  9. Sql中使用Case when

    SELECT CASE WHEN Column IS NOT NULL THEN '情况1' ELSE '情况2' END AS '列名' , FROM dbo.Table

  10. docker安装各种坑

    今天记录一下之前安装docker遇到的各种坑. 我们从http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/这个网站下载. 下 ...