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

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

  1. <!DOCTYPE>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>拖拽库</title>
  6. <style type="text/css">
  7. 	div,h2,p{margin:0;padding:0;}
  8. 	body{font:14px/1.5 arial;}
  9. 	#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}
  10. 	#box .title{height:25px;background:#f60;}
  11. 	#box2{width:100px;height:100px;background:#fef4eb;padding:5px;margin:100px;border:1px solid #f60;}
  12. 	#box2 .title{height:25px;background:#f60;}
  13. 	#tool{margin-bottom:10px;}
  14. </style>
  15. <script type="text/javascript">
  16. function Drag()
  17. {
  18. 	 //初始化
  19. 	 this.initialize.apply(this, arguments)
  20. }
  21. Drag.prototype = {
  22.  //初始化
  23.  initialize : function (drag, options)
  24.  {
  25. 	 this.drag = this.$(drag);
  26. 	 this._x = this._y = 0;
  27. 	 this._moveDrag = this.bind(this, this.moveDrag);
  28. 	 this._stopDrag = this.bind(this, this.stopDrag);
  29.  
  30. 	 this.setOptions(options);
  31.  
  32. 	 this.handle = this.$(this.options.handle);
  33. 	 this.maxContainer = this.$(this.options.maxContainer);
  34.  
  35. 	 this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
  36. 	 this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;
  37.  
  38. 	 this.limit = this.options.limit;
  39. 	 this.lockX = this.options.lockX;
  40. 	 this.lockY = this.options.lockY;
  41. 	 this.lock = this.options.lock;
  42.  
  43. 	 this.onStart = this.options.onStart;
  44. 	 this.onMove = this.options.onMove;
  45. 	 this.onStop = this.options.onStop;
  46.  
  47. 	 this.handle.style.cursor = "move";
  48.  
  49. 	 this.changeLayout();
  50.  
  51. 	 this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))
  52.  },
  53.  changeLayout : function ()
  54.  {
  55. 	 this.drag.style.top = this.drag.offsetTop + "px";
  56. 	 this.drag.style.left = this.drag.offsetLeft + "px";
  57. 	 this.drag.style.position = "absolute";
  58. 	 this.drag.style.margin = "0"
  59.  },
  60. 	startDrag : function (event)
  61.  {
  62. 	 var event = event || window.event;
  63.  
  64. 	 this._x = event.clientX - this.drag.offsetLeft;
  65. 	 this._y = event.clientY - this.drag.offsetTop;
  66.  
  67. 	 this.addHandler(document, "mousemove", this._moveDrag);
  68. 	 this.addHandler(document, "mouseup", this._stopDrag);
  69.  
  70. 	 event.preventDefault && event.preventDefault();
  71. 	 this.handle.setCapture && this.handle.setCapture();
  72.  
  73. 	 this.onStart()
  74.  },
  75.  moveDrag : function (event)
  76.  {
  77. 	 var event = event || window.event;
  78.  
  79. 	 var iTop = event.clientY - this._y;
  80. 	 var iLeft = event.clientX - this._x;
  81.  
  82. 	 if (this.lock) return;
  83.  
  84. 	 this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));
  85.  
  86. 	 this.lockY || (this.drag.style.top = iTop + "px");
  87. 	 this.lockX || (this.drag.style.left = iLeft + "px");
  88.  
  89. 	 event.preventDefault && event.preventDefault();
  90.  
  91. 	 this.onMove()
  92.  },
  93.  stopDrag : function ()
  94.  {
  95. 	 this.removeHandler(document, "mousemove", this._moveDrag);
  96. 	 this.removeHandler(document, "mouseup", this._stopDrag);
  97.  
  98. 	 this.handle.releaseCapture && this.handle.releaseCapture();
  99.  
  100. 	 this.onStop()
  101.  },
  102.  //参数设置
  103.  setOptions : function (options){
  104. 	this.options = {
  105. 	  handle:  this.drag, //事件对象
  106. 	  limit:  true, //锁定范围
  107. 	  lock:  false, //锁定位置
  108. 	  lockX:  false, //锁定水平位置
  109. 	  lockY:  false, //锁定垂直位置
  110. 	  maxContainer: document.documentElement || document.body, //指定限制容器
  111. 	  onStart: function () {}, //开始时回调函数
  112. 	  onMove:  function () {}, //拖拽时回调函数
  113. 	  onStop:  function () {} //停止时回调函数
  114. 	};
  115. 	for (var p in options) this.options[p] = options[p]
  116.  },
  117.  //获取id
  118.  $ : function (id){
  119. 		return typeof id === "string" ? document.getElementById(id) : id
  120.   },
  121.  //添加绑定事件
  122.  addHandler : function (oElement, sEventType, fnHandler) {
  123. 	 return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
  124.  },
  125.  //删除绑定事件
  126.  removeHandler : function (oElement, sEventType, fnHandler) {
  127. 	return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)
  128.  },
  129.  //绑定事件到对象
  130.  bind : function (object, fnHandler) {
  131. 	return function () {
  132. 		return fnHandler.apply(object, arguments)
  133. 		}
  134. 	}
  135. };
  136.  
  137. //应用
  138. window.onload = function (){
  139. 	 var oBox = document.getElementById("box");
  140. 	 var oTitle = oBox.getElementsByTagName("h2")[0];
  141. 	 var oSpan = document.getElementsByTagName("span")[0];
  142. 	 var oDrag = new Drag(oBox, {handle:oTitle, limit:false});
  143.  
  144. 	 var oBox2 = document.getElementById("box2");
  145. 	 var oTitle2 = oBox2.getElementsByTagName("h2")[0];
  146. 	 var oSpan2 = document.getElementsByTagName("span")[0];
  147. 	 var oDrag2 = new Drag(oBox2, {handle:oTitle2, limit:false});
  148.  
  149. 	 var aInput = document.getElementsByTagName("input");
  150.  
  151. 	 //锁定范围接口
  152. 	 aInput[0].onclick = function (){
  153. 		 oDrag.limit = !oDrag.limit;
  154. 		 this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"
  155. 	 };
  156.  
  157. 	 //水平锁定接口
  158. 	 aInput[1].onclick = function () {
  159. 		 oDrag.lockX = !oDrag.lockX;
  160. 		 this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"
  161. 	 };
  162.  
  163. 	 //垂直锁定接口
  164. 	 aInput[2].onclick = function (){
  165. 		 oDrag.lockY = !oDrag.lockY;
  166. 		 this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"
  167. 	 };
  168.  
  169. 	 //锁定位置接口
  170. 	 aInput[3].onclick = function () {
  171. 		 oDrag.lock = !oDrag.lock;
  172. 		 this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"
  173. 	 };
  174.  
  175. 	 //开始拖拽时方法
  176. 	 oDrag.onStart = function ()  {
  177. 		oSpan.innerHTML = "开始拖拽"
  178. 	 };
  179.  
  180. 	 //开始拖拽时方法
  181. 	 oDrag.onMove = function () {
  182. 		oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop
  183. 	 };
  184.  
  185. 	 //结束拖拽时方法
  186. 	 oDrag.onStop = function () {
  187. 		oSpan.innerHTML = "结束拖拽了"
  188. 	 };
  189. };
  190. </script>
  191. </head>
  192. <body>
  193. 	<div id="tool">
  194. 		  <input type="button" value="锁定范围" />
  195. 		  <input type="button" value="水平锁定" />
  196. 		  <input type="button" value="垂直锁定" />
  197. 		  <input type="button" value="锁定位置" />
  198. 	</div>
  199. 	<p>拖放状态：<span>未开始</span></p>
  200. 	<div id="box">
  201. 		<h2 class="title">我是第一个模块</h2>
  202. 	</div>
  203.  
  204. 	<div id="box2">
  205. 	 <h2 class="title">我是第二个模块</h2>
  206. 	</div>
  207. </body>
  208. </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. docker--docker介绍

    2 docker 介绍 2.1 容器技术 在计算机的世界中,容器拥有一段漫长且传奇的历史.容器与管理程序虚拟化 (hypervisor virtualization,HV)有所不同,管理程序虚拟化通过 ...

  2. 无法打开内核设备"\\.\Global\vmx86":系统找不到指定的文件. 是否在安装 VMwareWorksation 后重新引到 ? 问题解决

    节前正常使用的工作环境, 过完春节后, 上班第一天就不正常工作了, 难不成机器也要放假休息, 虚拟机打不开了, 没办法办公可是不行的. 上网查原因, 解决问题. 上网看了很多关于此问题的解决办法, 很 ...

  3. linux中常用的60个命令及作用详解

    Linux 必学的 60 个命令 Linux 提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在 Linux 系统上工作离不开使用系统 ...

  4. CodeForces.1174D.ArraySplitting.(后缀和数组 + 贪心)

    题目链接 参考代码: #include <cstdio> #include <algorithm> using namespace std; typedef long long ...

  5. HDU 5945 题解(DP)(单调队列)

    题面: Fxx and game Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) T ...

  6. body传参？parameter传参？Request Payload？Query String Parameter?

    今天,是有委屈的一天:今天,是有小情绪的一天.所以,我们要对今天进行小结,跟它做一个了断! 今天,后端来一个接口,告诉我"要用post请求,parameter形式传参".over. ...

  7. C#设计模式：中介者模式（Mediator Pattern）

    一,什么是中介者模式(Mediator Pattern)? 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性.比如:如果我们实现两个人的交互,难道我们要定义两个对象 ...

  8. ASE Alpha Sprint - backend scrum 8

    本次scrum于2019.11.13再sky garden进行,持续30分钟. 参与人: Zhikai Chen, Jia Ning, Hao Wang 请假: Xin Kang, Lihao Ran ...

  9. R语言data.table包fread读取数据

    R语言处理大规模数据速度不算快,通过安装其他包比如data.table可以提升读取处理速度. 案例,分别用read.csv和data.table包的fread函数读取一个1.67万行.230列的表格数 ...

  10. Linux系统性能测试工具（一）——内存带宽测试工具mbw

    本文介绍关于Linux系统(适用于centos/ubuntu等)的内存带宽测试工具-mbw.内存性能测试工具包括: 内存带宽测试工具——mbw: 内存压力测试工具——memtester: 内存综合性能 ...