JS拖拽系列--多元素拖拽，面向对象，es6拖拽
最近不太忙，终于有时间，研究了一下早就想搞定的拖拽系列，先是写了面向过程式的，再做一个面向对象的，再顺便弄弄继承，最后玩一下ES6的class 不觉用了一天多，收获很大。拖拽弄完，想再弄一个拖放。 上代码：
函数式简单版：
<style type="text/css">
#div1 {
position: absolute;
height: 100px;
width: 100px;
background: #ccc;
}
</style> <div id="div1"> sdasd
</div> <p>sdfsfsdfsdfsz</p> <script>
var log = console.log.bind(this); ;(function(win, doc) { var drag = function(obj, options, callback) { obj.onmousedown = function(ev) { var oEvent = ev || window.event;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY; doc.onmousemove = function(ev) { var oEvent = ev || window.event; var x = oEvent.clientX - disX;
var y = oEvent.clientY - disY; obj.style.left = x + 'px'; obj.style.top = y + 'px'; } doc.onmouseup = function() {
doc.onmousedown = null;
doc.onmousemove = null;
obj.releaseCapture && obj.releaseCapture();
} obj.setCapture && obj.setCapture();
return false; } }; win.drag = drag; })(window, document); var div1 = document.getElementById('div1'); drag(div1);
</script>
面向对象+继承:
<style type="text/css">
#div1 {
position: absolute;
height: 100px;
width: 100px;
background: #ccc;
} .drag_box {
height: 100px;
width: 100px;
background: rgb(254, 171, 121);
position: absolute;
}
</style>
<div id="div1">
sdasd
</div> <p>sdfsfsdfsdfsz
<br /> sdadas </p> <div class="drag_box">
多box拖拽 </div> <div class="drag_box">
多box拖拽 </div> <a href="javascript:;">dsadasd</a> <script>
var log = console.log.bind(this); ;
(function() { window.Drag = function Drag(cls) { this.obj = Array.prototype.slice.call(document.querySelectorAll(cls)); this.win_w = document.documentElement.clientWidth || document.body.clientWidth;
this.win_h = document.documentElement.clientHeight || document.body.clientHeight; } Drag.prototype.init = function(user_config) {
//默认参数
var defaults = {
isLimit: false,
isChangeIndex: false } this.config = this.extend(defaults, user_config); var _this = this;
for(var i = 0; i < this.obj.length; i++) { (function(i) {
_this.obj[i].onmousedown = function() {
this.disX;
this.disY;
var pos = document.defaultView.getComputedStyle(_this.obj[i], false).Position; if(!pos || pos.toLowerCase() == 'static') { _this.obj[i].style.position = 'absolute'
};
var e = e || window.event;
_this.mousedown(_this.obj[i], e);
return false } })(i); }
} Drag.prototype.extend = function(a, b) { for(var key in b) {
if(b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a; } Drag.prototype.mousedown = function(ele, e) {
var _this = this; var e = e || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
if(this.config.isChangeIndex) { for(var i = 0; i < this.obj.length; i++) { this.obj[i].style.zIndex = 'auto' } ele.style.zIndex = 100;
} document.onmousemove = function(e) {
var e = e || window.event;
_this.mousemove(ele, e); } document.onmouseup = function(e) { var e = e || window.event; _this.mouseup(ele, e) } } Drag.prototype.mousemove = function(ele, e) {
var l = e.clientX - this.disX;
var t = e.clientY - this.disY;
if(this.config.isLimit) { var w = this.win_w - ele.offsetWidth;
var h = this.win_h - ele.offsetHeight; ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px')); ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px')); } else { ele.style.left = l + 'px';
ele.style.top = t + 'px'; } } Drag.prototype.mouseup = function(ele, e) { document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
if(this.config.isChangeIndex) {
ele.style.zIndex = 100;
} return false }; })(); //继承出LimitDrag
;
(function() { // 限制范围拖拽 window.LimitDrag = function LimitDrag(cls) { Drag.call(this, cls) } LimitDrag.prototype = new Drag(); LimitDrag.prototype.constructor = LimitDrag; //限制范围
LimitDrag.prototype.mousemove = function(ele, e) { var l = e.clientX - this.disX;
var t = e.clientY - this.disY;
var w = this.win_w - ele.offsetWidth;
var h = this.win_h - ele.offsetHeight; ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px')); ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px')); ele.style.zIndex = 100; }
})(); window.onload = function() { new Drag('#div1').init({ }); new Drag('a').init({ }); new Drag('.drag_box').init({ isLimit: true,
isChangeIndex: true
}); new LimitDrag('p').init({ isLimit: true,
isChangeIndex: true
});
}
</script>
面向对象ES6：
<style type="text/css">
#div1 {
position: absolute;
height: 100px;
width: 100px;
background: #ccc;
} .drag_box {
height: 100px;
width: 100px;
background: rgb(254, 171, 121);
position: absolute;
}
</style>
<div id="div1">
sdasd
</div> <p>sdfsfsdfsdfsz
<br /> sdadas </p> <div class="drag_box">
多box拖拽 </div> <div class="drag_box" style="left: 300px;">
多box拖拽 </div> <script>
var log = console.log.bind(this); // es6 class class Drag { constructor(cls) { this.obj = document.querySelectorAll(cls);
this.win_w = document.documentElement.clientWidth || document.body.clientWidth;
this.win_h = document.documentElement.clientHeight || document.body.clientHeight; } init(user_config) { var defaults = { isLimit: false,
isChangeIndex: false
} this.config = this.extend(defaults, user_config); for(let i = 0; i < this.obj.length; i++) {
this.disX;
this.disY; this.obj[i].onmousedown = (e => {
var e = e || window.event;
this.mousedown(e, this.obj[i]);
})
}
} extend(a, b) { for(let attr in b) { if(b.hasOwnProperty(attr)) { a[attr] = b[attr] } } return a; } mousedown(e, ele) { this.disX = e.offsetX;
this.disY = e.offsetY;
var _this = this; var pos = document.defaultView.getComputedStyle(ele, false).Position; if(!pos || pos.toLowerCase() == 'static') { ele.style.position = 'absolute'
}; if(this.config.isChangeIndex) { for(let i = 0; i < this.obj.length; i++) { this.obj[i].style.zIndex = 'auto' } ele.style.zIndex = 100;
} document.onmousemove = function(e) {
var e = e || window.event;
_this.mousemove(e, ele);
return false
} document.onmouseup = function() { _this.mouseup(ele)
} } mousemove(e, ele) {
let l = e.clientX - this.disX;
let t = e.clientY - this.disY;
if(this.config.isLimit) { let w = this.win_w - ele.offsetWidth;
let h = this.win_h - ele.offsetHeight; ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px')); ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px')); } else { ele.style.left = l + 'px';
ele.style.top = t + 'px'; } return false; } mouseup(ele) {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
if(this.config.isChangeIndex) {
ele.style.zIndex = 100;
}
return false;
} } class chixingDrag extends Drag { constructor(...arg) { super(...arg)
} mousemove(e, ele) { let l = e.clientX - this.disX;
let t = e.clientY - this.disY; if(this.config.isLimit) { let w = this.win_w - ele.offsetWidth;
let h = this.win_h - ele.offsetHeight; ele.style.left = l <= 50 ? 0 : (l > (w - 50) ? (w + 'px') : (l + 'px')); ele.style.top = t <= 50 ? 0 : (t >= (h - 50) ? (h + 'px') : (t + 'px')); } else { ele.style.left = l + 'px';
ele.style.top = t + 'px'; } return false; } } window.onload = function() { var drag1 = new Drag('#div1').init({ isLimit: true
}); new chixingDrag('.drag_box').init({ isLimit: true,
isChangeIndex: true
}); }
</script>
参数说明：
isLimit: true,//是否限制范围，默认false
isChangeIndex: true //是否改变z-index，默认false，也就是多文件拖拽的时候是否新挪动的在最上边。
tips:关于setCapture,releaseCapture不是很懂，说了为了兼容IE，这里的问题暂时不考虑了。
JS拖拽系列--多元素拖拽，面向对象，es6拖拽的更多相关文章
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- 【功能代码】---5 JS通过事件隐藏显示元素
JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none <div id=" ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 通过JS动态的修改HTML元素的样式和增添标签元素等
一. 通过JS动态的修改HTML元素的样式 1. 要想在js中动态的修改HTML元素的样式,首先需要写document, document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...
随机推荐
- 转载：tcp详解
TCP详解 转自:http://www.cnblogs.com/kzloser/articles/2582957.html 首部格式 图释: 各个段位说明: 源端口和目的端口: 各占 2 字节.端口是 ...
- jQuery实现表单动态添加与删除数据操作示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- Fiddlercore拦截并修改HTTPS链接的网页，实现JS注入
原始出处:https://www.cnblogs.com/Charltsing/p/FiddlerCoreHTTPS.html Fiddlercore可以拦截和修改http的网页内容,代码在百度很多. ...
- React之父子组件之间传值
1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...
- 使用 tcpdump 抓包分析 TCP 三次握手、四次挥手与 TCP 状态转移
目录 文章目录 目录 前文列表 TCP 协议 图示三次握手与四次挥手 抓包结果 抓包分析 TCP 三次握手 数据传输 四次挥手 TCP 端口状态转移 状态转移 前文列表 <常用 tcpdump ...
- PyQt4 Python GUI窗体应用程序
目录 目录 前言 软件环境 PyQT简介 Setup PyCharm Setup SIP Setup PyQt4 测试PyQt是否安装成功 常见错误 最后 前言 还是一句老话,公司要什么我就做什么.这 ...
- MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
背景说明 需求:MySQL树形结构, 根据指定的节点,获取其所在全路径节点序列. 问题分析 1.可以使用类似Java这种面向对象的语言,对节点集合进行逻辑处理,获取全路径节点序列. 2.直接自定义My ...
- 通过wscript运行的JS脚本，如何引入另一个JS文件
链接: https://helloacm.com/include-external-files-in-vbscriptjscript-wsh/ 代码示例: function Include(jsFil ...
- 禁用linux的密码策略
注释掉文件 /etc/pam.d/system-auth-ac中的 password requisite pam_passwdqc.so enforce=everyone 这一行 #%PAM-1.0 ...
- sudo apt -y upgrade
sudo apt -y upgrade 直接upgrade,不再询问y/n 但是如果是sudo apt-get install scilab -y 那么,就不再显示上图中的信息,即当安装包的时 ...