一步一步理解拖拽Drag（四）
2024-05-10 23:52:24
拖拽三部曲：
1、可以指定标题栏作为移动区域，默认整个移动物体都可以拖动
2、可以设置移动范围，当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动
View Code
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>一步一步理解拖拽Drag（四）</title> 5 <style type="text/css"> 6 *{margin: 0px;padding: 0px;} 7 .moving{opacity: 0.6;filter: alpha(opacity=60);} 8 .maindiv{width: 960px;border: 1px solid red;position: relative;margin: 0 auto;} 9 .bigdiv{width: 960px;position: relative;height: 1000px;overflow: hidden;} 10 #mmdiv{width: 300px;height: 100px;left: 0px;top: 0px;position: absolute;border: 1px solid red;overflow: hidden;} 11 #mmdiv h3{width: 100%;height: 30px;line-height: 30px;background: #6666FF;cursor: move;} 12 #mmdiv h3 span{margin-left: 20px;} 13 </style> 14 <script type="text/javascript"> 15 var base = { 16 getId: function (id) { 17 return document.getElementById(id); 18 }, 19 addEvent: function (element, type, fn) { 20 if (element.addEventListener) { 21 element.addEventListener(type, fn, false); 22 } 23 else if (element.attachEvent) { 24 element.attachEvent("on" + type, fn); 25 } 26 else { 27 element["on" + type] = fn; 28 } 29 }, 30 removeEvent: function (element, type, fn) { 31 if (element.removeEventListener) { 32 element.removeEventListener(type, fn, false); 33 } 34 else if (element.detachEvent) { 35 element.detachEvent("on" + type, fn); 36 } 37 else { 38 element["on" + type] = null; 39 } 40 }, 41 unDefaultEvent: function (event) { 42 if (event && event.preventDefault) { 43 event.preventDefault(); 44 } 45 else { 46 event.returnValue = false; 47 } 48 }, 49 page: function (event) { 50 return { x: event.pageX || event.clientX + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.documentElement.scrollTop }; 51 } 52 }; 53 54 (function () { 55 56 function Drag(obj, handle, bigcont, moveCss, moveX, moveY) { 57 this.obj = obj; 58 this.handle = handle || obj; 59 this.bigcont = bigcont || document.documentElement; 60 this.moveCss = moveCss; 61 this.moveX = moveX || false; 62 this.moveY = moveY || false; 63 this.disX = this.disY = 0; 64 var _this = this; 65 base.addEvent(this.handle, "mousedown", function (event) { 66 _this.startDrag(event); 67 }); 68 } 69 70 Drag.prototype = { 71 startDrag: function (event) { 72 base.unDefaultEvent(event); 73 var _this = this; 74 this.disX = base.page(event).x - this.obj.offsetLeft; 75 this.disY = base.page(event).y - this.obj.offsetTop; 76 this.mousemoveHandle = function (event) { 77 _this.move(event); 78 }; 79 80 this.mouseupHandle = function () { 81 _this.stopDrag(); 82 }; 83 84 base.addEvent(document, "mousemove", this.mousemoveHandle); 85 86 base.addEvent(document, "mouseup", this.mouseupHandle); 87 88 if (document.selection && document.selection.empty) { 89 document.selection.empty(); 90 } 91 else if (window.getSelection) { 92 window.getSelection().removeAllRanges(); 93 } 94 95 if (this.obj.setCapture) { 96 this.obj.setCapture(true); 97 } 98 99 },100 move: function (event) {101 base.unDefaultEvent(event);102 this.obj.className = this.moveCss;103 104 var x = base.page(event).x - this.disX;105 var y = base.page(event).y - this.disY;106 107 var range = {108 minX: this.bigcont.scrollLeft,109 minY: this.bigcont.scrollTop,110 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,111 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight112 };113 114 x = Math.max(x, range.minX);115 x = Math.min(x, range.maxX);116 y = Math.max(y, range.minY);117 y = Math.min(y, range.maxY);118 119 if (true == this.moveX && true == this.moveY) {120 }121 else if (true == this.moveX) {122 this.obj.style.left = x + "px";123 }124 else if (true == this.moveY) {125 126 this.obj.style.top = y + "px";127 }128 else {129 this.obj.style.left = x + "px";130 this.obj.style.top = y + "px";131 }132 },133 stopDrag: function () {134 this.obj.className = "";135 base.removeEvent(document, "mousemove", this.mousemoveHandle);136 base.removeEvent(document, "mouseup", this.mouseupHandle);137 if (this.obj.releaseCapture) {138 this.obj.releaseCapture(true);139 }140 }141 };142 143 base.addEvent(window, "load", function (event) {144 var odiv = base.getId("mmdiv");145 var obj = odiv.getElementsByTagName("h3")[0];146 var bigdiv = base.getId("bigdiv");147 var btn = document.getElementsByTagName("input");148 new Drag(odiv, obj, bigdiv, "moving");149 });150 })();151 </script>152 </head>153 <body>154 <div class="maindiv">155 <div>156 默认整个页面内有问题，需要待完善157 </div>158 <div id="bigdiv" class="bigdiv">159 <div id="mmdiv">160 <h3>161 <span>标题</span>162 </h3>163 </div>164 </div>165 </div>166 </body>167 </html>转载于:https://www.cnblogs.com/kuikui/archive/2012/01/09/2316839.html
一步一步理解拖拽Drag（四）相关推荐
- html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
- vue中使用拖拽drag
被拖拽的节点 dragable="true" @dragstart="drag" 拖入的节点 @drop="drop" @dragover= ...
- Qt之QToolButton 实现动态拖拽Drag、Drop功能
简述 最近在做一个项目需要实现工具的动态添加功能,想来想去也只有动态拖拽最为直观,于是摸索了几天才摸索明白,最后选择了QToolButton作为载体重写了一下.当然也可以选择QPushButton作为 ...
- jQuery MiniUI 开发教程 TreeGrid 节点拖拽（四）
[b]TreeGrid:节点拖拽[/b] [img]http://www.miniui.com/docs/api/images/dragdropnode.png[/img] 参考示例: [url=ht ...
- IE下的拖拽Drag事件和示例
在先前某个系统测试的时候,有一个测试人员提到她们一个自认为是的bug:在ie浏览器上,拖动系统某个页面上的某个图片对象到页面边缘的某个位置,会出现该图片的单独显示页面. 看到这个bug描述时,测试了一 ...
- 前端拖拽drag的使用
HTML 设置 draggable 属性,可推拽 <div class="target" draggable="true">合格</div&g ...
- winform 文件拖拽drag\drop
winform 重写函数,而不是控件委托事件 protected override void OnDragDrop(DragEventArgs drgevent) protected override ...
- 【Fungus笔记】No.3：与 Sprite(精灵) 交互，Click(点击) or Drag(拖拽)
当Block(段落)的响应事件为Sprite类时,可以通过跟Sprite(精灵)的交互来执行指令. 交互行为包括拖拽和点击两种. 首先是 Object Clicked(点击). 设置为点击事件后,它要 ...
- html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
- Javascript自由拖拽类
基本拖拽 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true)默 ...
最新文章
- 新获融资1亿，聚焦全栈，云知声背后的AI下半场
- python使用方法-在Python中使用next()方法操作文件的教程
- Spring - Java/J2EE Application Framework 应用框架 第 18 章 使用Quartz或Timer完成时序调度工作
- Postman响应断言
- URAL 1047 Simple Calculations
- Mybatis笔记——Mybatis入门
- C++， ID、指针、handle （void *）的区别
- php和java 2017_Php与java的区别
- 怎么用计算机算成250,万能计算器
- TensorFlow4-常量和变量及TensorBoard使用
- python指定Gpu
- ipython tesseract_python使用Tesseract库识别验证
- PHP开发erp功能模块,ERP基础知识之功能模块介绍
- c语言版输出2-200以内的素数
- php做支付宝接口测试,支付宝接口调试经验总结
- android调用拨号界面拨打电话功能,Android实现拨打电话功能
- 作为亚马逊小白卖家不建议盲目进入亚马逊市场
- 比editplus好用的编辑器sublime text3
- Debug的常用命令
- c#创建word 表格垂直居中