首先,是最基本的面向过程的拖拽代码
<div id="box"></div>
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
window.onload=function(){
var oDiv=document.getElementById('box');
var disX=0;
var disY=0;
oDiv.onmousedown=function(event){
//获取事件对象
var event=event||window.event;
// disX相当于鼠标到div左侧的距离,同理disY
disX=event.clientX-oDiv.offsetLeft;
disY=event.clientY-oDiv.offsetTop;
document.onmousemove=function(event){
var event=event||window.event;
oDiv.style.left=event.clientX-disX+'px';
oDiv.style.top=event.clientY-disY+'px';
}
document.onmouseup=function () {
// 鼠标释放时事件清空
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
开始改写版本一
尽量不要出现函数嵌套函数
- 可以有全局变量
- 把onload中不是赋值的语句放在单独函数中
var oDiv=null;
var disX=0;
var disY=0;
window.onload=function(){
oDiv=document.getElementById('box');
init()
}
function init() {
oDiv.onmousedown=fnDown;
}
function fnDown(event){
var event=event||window.event;
disX=event.clientX-oDiv.offsetLeft;
disY=event.clientY-oDiv.offsetTop;
document.onmousemove=fnMove;
document.onmouseup=fnUp;
return false;
}
function fnMove(event){
var event=event||window.event;
oDiv.style.left=event.clientX-disX+'px';
oDiv.style.top=event.clientY-disY+'px';
}
function fnUp() {
document.onmousemove=null;
document.onmouseup=null;
}
面向对象的改写 es5
- 全局变量就是属性
- 函数就是方法
- onload中创建对象
- 改this指向问题
在ie和谷歌下,这样是可以的,但是火狐下,应为有些地方为了this指向 嵌套了一层函数,但火狐可不这样,他认为event是事件函数传递的,也就是事件后面更着的函数,这是好就需要把event当做参数传递了
window.onload=function(){
var d=new Drag('box');
d.init();
}
//构造函数
function Drag(id) {
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
}
Drag.prototype.init=function () {
// 这里的this 指向的是Drag这个类
var _this=this;
this.oDiv.onmousedown=function () { //这里嵌套一层是为了解决若写成this.fnDown的话,下面fnDown里面的this就会变成this.oDiv,相当于this就变成div了
// 匿名函数里的this是指window,因为this指的是调用他的对象,但是匿名函数不知道是谁调用的,所以可以认为是被window调用的
_this.fnDown()
};
}
Drag.prototype.fnDown=function (event) {
var event=event||window.event;
this.disX=event.clientX-this.oDiv.offsetLeft;
this.disY=event.clientY-this.oDiv.offsetTop;
var _this=this;
document.onmousemove=function () {
_this.fnMove()
};
document.onmouseup=this.fnUp;
return false;
}
Drag.prototype.fnMove=function (event) {
var event=event||window.event;
this.oDiv.style.left=event.clientX- this.disX+'px';
this.oDiv.style.top=event.clientY- this.disY+'px';
}
Drag.prototype.fnUp=function () {
document.onmousemove=null;
document.onmouseup=null;
}
但是火狐下报错:TypeError: event is undefined
火狐的解决办法
window.onload = function () {
var d = new Drag('box');
d.init();
}
//构造函数
function Drag(id) {
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById('box');
}
Drag.prototype.init = function () {
var _this = this;
this.oDiv.onmousedown = function (event) { //嵌套是为了解决this问题
var event = event || window.event;
_this.fnDown(event)
};
}
Drag.prototype.fnDown = function (event) {
this.disX = event.clientX - this.oDiv.offsetLeft;
this.disY = event.clientY - this.oDiv.offsetTop;
var _this = this;
document.onmousemove = function (event) {
_this.fnMove(event)
};
document.onmouseup = this.fnUp;
return false;
}
Drag.prototype.fnMove = function (event) {
this.oDiv.style.left = event.clientX - this.disX + 'px';
this.oDiv.style.top = event.clientY - this.disY + 'px';
}
Drag.prototype.fnUp = function () {
document.onmousemove = null;
document.onmouseup = null;
}
也可以吧init 放进构造函数里面,这样只要new 一个就可以生成拖拽了
,如下所示
window.onload=function(){
var d=new Drag('box');
}
//构造函数
function Drag(id) {
var _this=this;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById('box');
this.oDiv.onmousedown=function (event) { //嵌套是为了解决this问题
var event=event||window.event;
_this.fnDown(event)
};
}
Drag.prototype.fnDown=function (event) {
this.disX=event.clientX-this.oDiv.offsetLeft;
this.disY=event.clientY-this.oDiv.offsetTop;
var _this=this;
document.onmousemove=function (event) {
_this.fnMove(event)
};
document.onmouseup=this.fnUp;
return false;
}
Drag.prototype.fnMove=function (event) {
this.oDiv.style.left=event.clientX- this.disX+'px';
this.oDiv.style.top=event.clientY- this.disY+'px';
}
Drag.prototype.fnUp=function () {
document.onmousemove=null;
document.onmouseup=null;
}
es6 面向对象的改写,也可以吧init 放进构造函数里面
window.onload = function () {
var d = new Drag('box');
d.init();
}
// 类
class Drag {
//构造函数
constructor(id) {
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
}
init() {
var _this = this;
this.oDiv.onmousedown = function (event) {
var event = event || window.event;
_this.fnDown(event)
};
}
fnDown(event) {
this.disX = event.clientX - this.oDiv.offsetLeft;
this.disY = event.clientY - this.oDiv.offsetTop;
var _this = this;
document.onmousemove = function (event) {
_this.fnMove(event)
};
document.onmouseup = this.fnUp;
return false;
}
fnMove(event) {
this.oDiv.style.left = event.clientX - this.disX + 'px';
this.oDiv.style.top = event.clientY - this.disY + 'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
}
}
初步总结
- 原则
先写出普通的写法,然后改写成面向对象的写法普通方法变形
- 尽量不要出现函数嵌套函数
- 可以有全局变量
- 把onload中不是赋值的语句放在单独函数中
改写面向对象
- 全局变量就是属性
- 函数就是方法
- onload中创建对象
- 改this指向问题
说了这么多,我们来封装一个拖拽组件吧
组件就该可以自自定义样式吧~~~~~,data-config写入自定义的样式,有人说你怎么怎么鸡肋,不如css里面写写快,但也是可以不写的,有默认参数,js里面已经写好了,如果data-config写了的话是可以覆盖js里面的,具体看js代码
<div id="box1" data-config='{"width": "100px","height": "100px","backgroundColor": "black","position": "absolute"}'></div>
<script src="./index.js"></script>
<script>
var div1 = new Drag('box1');
div1.init();
</script>
尽量让用户少写css,那你就帮他考虑周全吧
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
// 外层包裹防止函数被污染
(function () {
// Drag 类
class Drag {
constructor (id) {
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
// 默认设置
this.config = {
'width': '200px',
'height': '200px',
'backgroundColor': 'red',
'position': 'absolute'
};
// 若有自定义属性,那就合并
if (this.getConfig()) {
Object.assign(this.config, this.getConfig());
}
console.log(this.config);
this.init();
}
getConfig () {
var config = this.oDiv.getAttribute('data-config');
if (config && config !== '') {
return JSON.parse(config);
} else {
return null;
}
}
init () {
var _this = this;
this.oDiv.onmousedown = function (ev) {
/* 传入_this,为了下面不在重复写 */
_this.fnDown(ev, _this);
};
// 改变设置的属性
for (const i in this.config) {
this.oDiv.style[i] = this.config[i];
}
}
/* 拖拽本体 */
fnDown (ev, _this) {
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = function (ev) {
_this.fnMove(ev);
};
document.onmouseup = this.fnUp;
/* 阻止默认事件 */
return false;
}
fnMove (ev) {
this.oDiv.style.left = ev.clientX - this.disX + 'px';
this.oDiv.style.top = ev.clientY - this.disY + 'px';
};
fnUp () {
document.onmousemove = null;
document.onmouseup = null;
}
}
window.Drag = Drag;
})();
你说啥??不支持手机端??那就来支持一下吧
支持的不够怎么完美,见谅。。
// 在fnDown里面先判断一下
// 判断是否为手机端
var touch;
if (ev.touches) {
touch = ev.touches[0];
} else {
touch = ev;
}
this.disX = touch.clientX - this.oDiv.offsetLeft;
this.disY = touch.clientY - this.oDiv.offsetTop;
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、Touch、ipad,android上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
// 原理还是一样的
// js代码如下
(function () {
// Drag 类
class Drag {
constructor(id) {
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
// 默认设置
this.config = {
'width': '200px',
'height': '200px',
'backgroundColor': 'red',
'position': 'absolute'
};
// 若有自定义属性,那就合并
if (this.getConfig()) {
Object.assign(this.config, this.getConfig());
}
console.log(this.config);
this.init();
}
getConfig() {
var config = this.oDiv.getAttribute('data-config');
if (config && config !== '') {
return JSON.parse(config);
} else {
return null;
}
}
init() {
var _this = this;
// pc端
this.oDiv.onmousedown = function (ev) {
/* 传入_this,为了下面不在重复写 */
_this.fnDown(ev, _this);
};
// 移动端
this.oDiv.ontouchstart=function(ev){
_this.fnDown(ev, _this);
}
// 改变设置的属性
for (const i in this.config) {
this.oDiv.style[i] = this.config[i];
}
}
/* 拖拽本体 */
fnDown(ev, _this) {
// 判断是否为手机端
var touch;
if (ev.touches) {
touch = ev.touches[0];
} else {
touch = ev;
}
this.disX = touch.clientX - this.oDiv.offsetLeft;
this.disY = touch.clientY - this.oDiv.offsetTop;
// pc
document.onmousemove = function (ev) {
_this.fnMove(ev);
};
// 移动端
document.ontouchmove = function (ev) {
_this.fnMove(ev);
};
document.onmouseup = this.fnUp;
document.ontouchend = this.fnUp;
/* 阻止默认事件 */
return false;
}
fnMove(ev) {
var touch;
if (ev.touches) {
touch = ev.touches[0];
} else {
touch = ev;
}
this.oDiv.style.left = touch.clientX - this.disX + 'px';
this.oDiv.style.top = touch.clientY - this.disY + 'px';
};
fnUp() {
document.onmousemove = null;
document.ontouchmove = null;
document.onmouseup = null;
document.ontouchend = null;
}
}
window.Drag = Drag;
})();