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

js div浮动层拖拽效果代码的更多相关文章

  1. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  2. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  3. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  6. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  8. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS实现拖拽效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 应用python编写简单新浪微博应用(一)

    转载至:http://blog.sina.com.cn/s/blog_6c39196501016o7n.html 首先,你要有一个新浪微博账号. 申请页面:http://weibo.com 其次,你要 ...

  2. 15SpringMvc_在业务控制方法中写入模型变量收集参数，且使用@InitBind来解决字符串转日期类型

    之前第12篇文章中提到过在业务控制方法中写入普通变量收集参数的方式,也提到了这种凡方式的弊端(参数很多怎么办),所以这篇文章讲的是在业务控制方法中写入模型变量来收集参数.本文的案例实现的功能是,在注册 ...

  3. Flash相关知识

    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" wid ...

  4. php基础07：流程控制

    <?php //1.PHP foreach循环只适用于数组,并用于遍历数组中的每个键/值对. $colors = array("red","green", ...

  5. 几种Java NIO框架的比较（zz）

    问题:生活中工作中,会有人问我javaNIO框架里面 Netty Mina  xSocket Grizzly 等等哪个比较好? 在这里写一下自己的感受,也算是总结一下吧 在我的印象中.不管是什么NIO ...

  6. [CareerCup] 1.7 Set Matrix Zeroes 矩阵赋零

    1.7 Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column are ...

  7. iOS 苹果自带地图定位Core Location

    Core Location是iOS SDK中一个提供设备位置的框架.可以使用三种技术来获取位置:GPS.蜂窝或WiFi.在这些技术中,GPS最为精准,如果有GPS硬件,Core Location将优先 ...

  8. python中的内置函数getattr()

    在python的官方文档中:getattr()的解释如下: getattr(object, name[, default]) Return the value of the named attribu ...

  9. 浅析java类加载器ClassLoader

    作为一枚java猿,了解类加载器是有必要的,无论是针对面试还是自我学习. 本文从JDK提供的ClassLoader.委托模型以及如何编写自定义的ClassLoader三方面对ClassLoader做一 ...

  10. JavaScript实现MVVM之我就是想监测一个普通对象的变化

    http://hcysun.me/2016/04/28/JavaScript%E5%AE%9E%E7%8E%B0MVVM%E4%B9%8B%E6%88%91%E5%B0%B1%E6%98%AF%E6% ...