完整的网页浮动层拖动实例代码

一个供学习不错的网页拖动层，具有丰富的层拖动设置功能，比如可设置拖动的范围、垂直、水平方向拖动，是否透明显示层等，运用JS和CSS等实现的HTML层拖动网页，代码完整：前端框架资源分享

.代码  

  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. <title>一款很不错的Js控制div层拖动/拖放代码</title>
  5. </head>
  6. <body>
  7. <script>
  8. var isIE = (document.all) ? true : false;
  9. var $ = function (id) {
  10. return "string" == typeof id ? document.getElementById(id) : id;
  11. };
  12. var Class = {
  13. create: function() {
  14. return function() { this.initialize.apply(this, arguments); }
  15. }
  16. }
  17. var Extend = function(destination, source) {
  18. for (var property in source) {
  19. destination[property] = source[property];
  20. }
  21. }
  22. var Bind = function(object, fun) {
  23. return function() {
  24. return fun.apply(object, arguments);
  25. }
  26. }
  27. var BindAsEventListener = function(object, fun) {
  28. return function(event) {
  29. return fun.call(object, (event || window.event));
  30. }
  31. }
  32. var CurrentStyle = function(element){
  33. return element.currentStyle || document.defaultView.getComputedStyle(element, null);
  34. }
  35. function addEventHandler(oTarget, sEventType, fnHandler) {
  36. if (oTarget.addEventListener) {
  37. oTarget.addEventListener(sEventType, fnHandler, false);
  38. } else if (oTarget.attachEvent) {
  39. oTarget.attachEvent("on" + sEventType, fnHandler);
  40. } else {
  41. oTarget["on" + sEventType] = fnHandler;
  42. }
  43. };
  44. function removeEventHandler(oTarget, sEventType, fnHandler) {
  45. if (oTarget.removeEventListener) {
  46. oTarget.removeEventListener(sEventType, fnHandler, false);
  47. } else if (oTarget.detachEvent) {
  48. oTarget.detachEvent("on" + sEventType, fnHandler);
  49. } else {
  50. oTarget["on" + sEventType] = null;
  51. }
  52. };
  53. var Drag = Class.create();
  54. Drag.prototype = {
  55. //拖放对象
  56. initialize: function(drag, options) {
  57. this.Drag = $(drag);//拖放对象
  58. this._x = this._y = 0;//记录鼠标相对拖放对象的位置
  59. this._marginLeft = this._marginTop = 0;//记录margin
  60. //事件对象(用于绑定移除事件)
  61. this._fM = BindAsEventListener(this, this.Move);
  62. this._fS = Bind(this, this.Stop);
  63. this.SetOptions(options);
  64. this.Limit = !!this.options.Limit;
  65. this.mxLeft = parseInt(this.options.mxLeft);
  66. this.mxRight = parseInt(this.options.mxRight);
  67. this.mxTop = parseInt(this.options.mxTop);
  68. this.mxBottom = parseInt(this.options.mxBottom);
  69. this.LockX = !!this.options.LockX;
  70. this.LockY = !!this.options.LockY;
  71. this.Lock = !!this.options.Lock;
  72. this.onStart = this.options.onStart;
  73. this.onMove = this.options.onMove;
  74. this.onStop = this.options.onStop;
  75. this._Handle = $(this.options.Handle) || this.Drag;
  76. this._mxContainer = $(this.options.mxContainer) || null;
  77. this.Drag.style.position = "absolute";
  78. //透明
  79. if(isIE && !!this.options.Transparent){
  80. //填充拖放对象
  81. with(this._Handle.appendChild(document.createElement("div")).style){
  82. width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0;
  83. }
  84. }
  85. //修正范围
  86. this.Repair();
  87. addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
  88. },
  89. //设置默认属性
  90. SetOptions: function(options) {
  91. this.options = {//默认值
  92. Handle:   "",//设置触发对象（不设置则使用拖放对象）
  93. Limit:   false,//是否设置范围限制(为true时下面参数有用,可以是负数)
  94. mxLeft:   0,//左边限制
  95. mxRight:  9999,//右边限制
  96. mxTop:   0,//上边限制
  97. mxBottom:  9999,//下边限制
  98. mxContainer: "",//指定限制在容器内，也就是一定范围内拖动
  99. LockX:   false,//是否锁定水平方向拖放
  100. LockY:   false,//是否锁定垂直方向拖放
  101. Lock:   false,//是否锁定
  102. Transparent: false,//是否透明显示拖动层
  103. onStart:  function(){},//开始移动时执行
  104. onMove:   function(){},//移动时执行
  105. onStop:   function(){}//结束移动时执行
  106. };
  107. Extend(this.options, options || {});
  108. },
  109. //开始准备拖动
  110. Start: function(oEvent) {
  111. if(this.Lock){ return; }
  112. this.Repair();
  113. //记录鼠标相对拖放对象的位置
  114. this._x = oEvent.clientX - this.Drag.offsetLeft;
  115. this._y = oEvent.clientY - this.Drag.offsetTop;
  116. //记录margin
  117. this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
  118. this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
  119. //mousemove时移动 mouseup时停止
  120. addEventHandler(document, "mousemove", this._fM);
  121. addEventHandler(document, "mouseup", this._fS);
  122. if(isIE){
  123. //焦点丢失
  124. addEventHandler(this._Handle, "losecapture", this._fS);
  125. //设置鼠标捕获
  126. this._Handle.setCapture();
  127. }else{
  128. //焦点丢失
  129. addEventHandler(window, "blur", this._fS);
  130. //阻止默认动作
  131. oEvent.preventDefault();
  132. };
  133. //附加程序
  134. this.onStart();
  135. },
  136. //修正范围
  137. Repair: function() {
  138. if(this.Limit){
  139. //修正错误范围参数
  140. this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
  141. this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
  142. //如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
  143. !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");
  144. }
  145. },
  146. //拖动
  147. Move: function(oEvent) {
  148. //判断是否锁定
  149. if(this.Lock){ this.Stop(); return; };
  150. //清除选择
  151. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  152. //设置移动参数
  153. var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
  154. //设置范围限制
  155. if(this.Limit){
  156. //设置范围参数
  157. var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
  158. //如果设置了容器，再修正范围参数
  159. if(!!this._mxContainer){
  160. mxLeft = Math.max(mxLeft, 0);
  161. mxTop = Math.max(mxTop, 0);
  162. mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
  163. mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
  164. };
  165. //修正移动参数
  166. iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
  167. iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
  168. }
  169. //设置位置，并修正margin
  170. if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
  171. if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
  172. //附加程序
  173. this.onMove();
  174. },
  175. //停止拖动
  176. Stop: function() {
  177. //移除事件
  178. removeEventHandler(document, "mousemove", this._fM);
  179. removeEventHandler(document, "mouseup", this._fS);
  180. if(isIE){
  181. removeEventHandler(this._Handle, "losecapture", this._fS);
  182. this._Handle.releaseCapture();
  183. }else{
  184. removeEventHandler(window, "blur", this._fS);
  185. };
  186. //附加程序
  187. this.onStop();
  188. }
  189. };
  190. </script>
  191. <style>
  192. #idContainer{ border:10px solid #990000; width:600px; height:300px;}
  193. #idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; top:50px; left:50px;}
  194. #idHandle{cursor:move; height:25px; background:#0000FF; overflow:hidden;}
  195. </style>
  196. <div id="idContainer">
  197. <div id="idDrag"><div id="idHandle"></div></div>
  198. </div>
  199. <input id="idReset" type="button" value="复位" />
  200. <input id="idLock" type="button" value="锁定" />
  201. <input id="idLockX" type="button" value="锁定水平" />
  202. <input id="idLockY" type="button" value="锁定垂直" />
  203. <input id="idLimit" type="button" value="范围锁定" />
  204. <input id="idLimitOff" type="button" value="取消范围锁定" />
  205. <br />拖放状态：<span id="idShow">未开始</span>
  206. <script>
  207. var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true,
  208. onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
  209. onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
  210. onStop: function(){ $("idShow").innerHTML = "结束拖放"; }
  211. });
  212. $("idReset").onclick = function(){
  213. drag.Limit = true;
  214. drag.mxLeft = drag.mxTop = 0;
  215. drag.mxRight = drag.mxBottom = 9999;
  216. drag.LockX = drag.LockY = drag.Lock = false;
  217. }
  218. $("idLock").onclick = function(){ drag.Lock = true; }
  219. $("idLockX").onclick = function(){ drag.LockX = true; }
  220. $("idLockY").onclick = function(){ drag.LockY = true; }
  221. $("idLimit").onclick = function(){  drag.mxRight = drag.mxBottom = 200;drag.Limit = true; }
  222. $("idLimitOff").onclick = function(){ drag.Limit = false; }
  223. </script>
  224. </body>
  225. </html>

完整的网页浮动层拖动实例代码

时间： 2024-08-26 13:26:28

完整的网页浮动层拖动实例代码的相关文章

从右向左缓缓浮出的网页浮动层广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

防止点击退格键使网页后退实例代码

防止点击退格键使网页后退实例代码:有些经常使用编辑器的朋友可能会遇到这样的现象,当使用退格键BackSpace删除文本的时候,并没有实现这个效果,而是使网页发生后退现象,这是一件非常恼人的事情,因为有时候已经编辑好的内容就此消失,下面就简单介绍一下如何阻止这样的情况发生.代码如下: $(document).keydown(function(e){ var doPrevent; if(e.keyCode==8){ var d=e.srcElement||e.target; if(d.tagName

div浮动层与div层有何不同css中有什么关系

首先DIV浮动层与DIV层都是指DIV布局,体感音乐一般使用CSS样式表加DIV标签组合进行布局网页. div层一般包括div浮动层,div浮动层说明div被加入css浮动样式所以被称为div浮动层,而没有加入float浮动样式不具有浮动效果,所以如果没有被加浮动样式div不被称为浮动层.当然span.h1.ul.li等标签也是层,只不过span.h1.ul.li等标签没有div使用频率高,所以一般就将div作为象征性称呼. 接下来DIVCSS5通过实例告诉大家什么是一般层,什么是浮动层?为什么

网页浮动工具条

1.自动判断浏览器宽度. 当浏览器窗口小于1024时,工具条会自动隐藏 支持浏览器窗口拖拽 2.当拖动浏览器窗口大小时,工具条位置也会相应调整,始终保持贴在网页主体内容右侧. 用到的javascript代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

【Win 10应用开发】自定义浮动层——Flyout

最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”. 好,进入正题. 弹出层有三种. 第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并且总在最前面,你只有关闭了对话框之后才能进行其他操作. 第二种就是提示文本,比如在一个Windows窗口上,你把鼠标移到窗口的关闭按钮上,稍稍停一下,你会下面有提示文本出来,告诉这是关闭按钮. 第三种有点像提示文本,但它不会自动消息,而是等你点击了其他对象后它会消失,很像下拉列表控件的弹出框. Fl

鼠标在网页上的拖动效果

使用JavaScript写的鼠标拖动效果 近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 效果展示 下面是我的源代码 <html> <head> <style> div{ width:200px; height:200px; background-color:red; position:absolute; } <

spring框架中多数据源创建加载并且实现动态切换的配置实例代码

原文:spring框架中多数据源创建加载并且实现动态切换的配置实例代码 源代码下载地址:http://www.zuidaima.com/share/1774074130205696.htm 在我们的项目中遇到这样一个问题:我们的项目需要连接多个数据库,而且不同的客户在每次访问中根据需要会去访问不同的数据库.我们以往在spring和hibernate框架中总是配置一个数据源,因而sessionFactory的dataSource属性总是指向这个数据源并且恒定不变,所有DAO在使用sessionFa