简单拖拽实现
时间:2022-05-04
本文章向大家介绍简单拖拽实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
拖拽的元素必须绝对定位。
在实际操作中,犯了一个简单的错误:
对于iframe元素的事件绑定,需要在src完全加载后进行绑定。
iframe.onload = function(){
iframe.contentDocument.onclick = function(){}
...
}
另外,目前版本对于iframe的拖动有bug,不过可以通过在div中嵌套iframe来实现兼容。
1 var Drag = function(el,minX,maxX,minY,maxY){
2 // 拖拽元素
3 //el: 拖拽元素
4 //minX: X轴最小边界
5 //minY: Y轴最小边界
6 //maxX: X轴最大边界
7 //maxY: X轴最大边界
8 var self = this;
9 this.obj = el;
10 this.obj.minX = minX;
11 this.obj.minY = minY;
12 this.obj.maxX = maxX;
13 this.obj.maxY = maxY;
14
15 if(isNaN(Drag.getLocation(el).x))
16 this.obj.style.left = '0px';
17 if(isNaN(Drag.getLocation(el).y))
18 this.obj.style.top = '0px';
19 if(el.tagName.toLowerCase() == 'iframe'){
20 this.obj.contentDocument.onmousedown = function(e){
21 start.call(el,e);
22 Drag.fixEvent(e).stopPropagation()
23 };
24 }else{
25 this.obj.onmousedown = function(e){
26 start.call(el,e);
27 Drag.fixEvent(e).stopPropagation()
28 };
29 }
30
31 }
32 Drag.fixEvent = function(e){
33 e = e || window.event;
34 // 在此处,Chrome的layerX不正确,使用offsetX。
35 // 另外,无法修改事件对象的属性,只能另外添加
36 if(typeof e.layerX == "undefined" || e.layerX != e.offsetX ){
37 e.lX = e.offsetX;
38 e.lY = e.offsetY;
39 }else{
40 e.lX = e.layerX;
41 e.lY = e.layerY;
42 }
43 if(!e.pageX)
44 e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
45 if(!e.pageY)
46 e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
47 if(!e.stopPropagation){
48 e.stopPropagation = function(){
49 e.cancelBubble = true;
50 }
51 }
52 if(!e.preventDefault){
53 e.preventDefault = function(){
54 e.returnValue = false;
55 }
56 }
57 return e;
58 };
59 Drag.getLocation = function(el){
60 var location = {},style;
61 if(window.getComputedStyle){
62 style = window.getComputedStyle(el,'');
63 location.x = parseInt(style.getPropertyValue('left'));
64 location.y = parseInt(style.getPropertyValue('top'));
65 }else{
66 style = el.currentStyle;
67 location.x = parseInt(style['left']);
68 location.y = parseInt(style['top']);
69 }
70 return location;
71 };
72
73 function start(e){
74 var self = this;
75 e = Drag.fixEvent(e);
76 this.inDOMLocation = {
77 x: e.lX,
78 y: e.lY
79 };
80 this.oldLocation = {
81 x: e.clientX,
82 y: e.clientY
83 };
84 //设定鼠标的移动范围
85 if(this.minX)
86 this.minMouseX = e.layerX + this.minX;
87 if(this.minY)
88 this.minMouseY = e.layerY + this.minY;
89 if(this.maxX)
90 this.maxMouseX = this.maxX - (this.offsetWidth - (parseInt(this.clientLeft) || 0) - e.lX)
91 if(this.maxY)
92 this.maxMouseY = this.maxY - (this.offsetHeight - (parseInt(this.clientTop) || 0) - e.lY)
93
94 if(this.tagName.toLowerCase() == 'iframe'){
95 this.contentDocument.onmousemove = function(e){
96 drag.call(self,e);
97 };
98 this.contentDocument.onmouseup = function(e){
99 stop.call(self,e);
100 };
101 }else{
102 this.onmousemove = function(e){
103 drag.call(self,e);
104 };
105 this.onmouseup = function(e){
106 stop.call(self,e);
107 };
108 }
109
110 }
111 function drag(e){
112 e = Drag.fixEvent(e);
113 var newLocation = {
114 x: e.clientX,
115 y: e.clientY
116 }, x,y;
117 x = newLocation.x;
118 y = newLocation.y;
119 if(this.minMouseX)
120 x = Math.max(this.minMouseX,newLocation.x)
121 if(this.minMouseY)
122 y = Math.max(this.minMouseY,newLocation.y)
123 if(this.maxMouseX)
124 x = Math.min(this.maxMouseX,x)
125 if(this.maxMouseY)
126 y = Math.min(this.maxMouseY,y)
127
128 this.style.left = Drag.getLocation(this).x + (x - this.oldLocation.x) + 'px';
129 this.style.top = Drag.getLocation(this).y + (y - this.oldLocation.y) + 'px';
130 this.oldLocation = {
131 x: x,
132 y: y
133 };
134 return;
135 }
136 function stop(){
137 this.oldLocation = null;
138 this.inDOMLocation = null;
139 if(this.tagName.toLowerCase() == 'iframe'){
140 this.contentDocument.onmouseup = this.contentDocument.onmousemove = null
141 }else{
142 this.onmouseup = this.onmousemove = null
143 }
144 }
使用也很简单,
Drag.init(document.getElementById('d'),20,500,30,500)
- 解决Boost库链接出错问题
- 引入Option优雅地保证健壮性
- java正则校验,密码必须由字母和数字组成
- Spring Boot集成JasperReports生成PDF文档
- Redux框架reducer对状态的处理
- 使用Spring Cloud Security OAuth2搭建授权服务
- Nginx性能优化
- linux 如何正确的关闭mongodb
- 运用Aggregator模式实现MapReduce
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- spring boot项目在外部tomcat环境下部署
- 利用Actor实现管道过滤器模式
- SpringBoot整合Quartz定时任务 的简单实例
- 从机器学习学python(一) ——numpy中的shape、tile、argsort
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 社区开源框架音效管理模块:AudioManager详解
- 社区开源框架音效管理模块:AvatarManager详解
- vue-element-admin实现一个可编辑的table
- vue+element实现一个excel表格下载的功能
- vue的select下拉框多选项-multiple属性
- HBase基准测试
- Shell数组的使用
- 查询MYSQL锁表情况
- 查看MYSQL表数据大小
- 解决Centos6.0下出现protocol not available错误
- MYSQL删除大数据表经验总结
- 推荐4款堪比Google的搜索网站
- 那些年你走过下划线的坑
- 2018你该认真学Python了
- 服务端口占用案例分析