写在前面，初学者，共同进步 ，个人笔记分享
01
拖拽.gif
拖拽
网页中经常需要div的拖动，这里写的封装的一个函数是无限制的拖拽，可以在子类中添加各种限制条件，完成拖拽。
02
- 面向对象的方法，构造函数里保存属性，方法使用**函数名.prototype.方法名
** - ** disX与disY分别是鼠标与div**的横向和纵向距离
- var _this = this; 解决了在后面的事件添加中，this的变化导致的错误
- 添加鼠标移动函数
/**
* @constructor
* @param {String} id = id为盒子div的id
* @description 拖拽
* @example
* var myDrag = new Drag('id');
*/
function Drag(id) {
this.disX = 0;
this.disY = 0;
var _this = this;
this.oDiv = document.getElementById(id);
//鼠标按下事件
this.oDiv.onmousedown = function() {
_this.Down();
//阻止默认事件
return false;
};
}
03方法
鼠标按下
- 先记录鼠标按下的位置与div之间的距离
- 在鼠标按下函数中绑定鼠标移动和抬起事件
- setCapture函数功能：一旦窗口捕获了鼠标，所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。 简单来说，这里添加的意义就是在div上的事件，我们拖动div时，不会选中页面的其他内容。
//鼠标按下函数
Drag.prototype.Down = function(ev) {
var _this = this;
var oEvent = ev || event;
//在鼠标按下的时候记录鼠标与div之间的横向纵向距离
this.disX = oEvent.clientX - _this.oDiv.offsetLeft;
this.disY = oEvent.clientY - _this.oDiv.offsetTop;
//事件绑定 解决拖动文字被选中的问题
if (this.oDiv.setCapture) {
//IE
this.oDiv.onmousemove =function(){
_this.fnMove(ev);
};
this.oDiv.onmouseup = function(){
_this.fnUp(this);
};
this.oDiv.setCapture();
} else{
document.onmousemove = function(ev) {
_this.fnMove(ev);
};
document.onmouseup = function() {
_this.fnUp(this);
};
}
}
鼠标移动与抬起
- 动态获取鼠标的位置，根据鼠标按下时存储的距离，计算div的位置，实时更新
- 鼠标抬起时释放事件
//鼠标移动时根据鼠标的位置计算div的位置并实时更新位置
Drag.prototype.fnMove = function(ev) {
var oEvent = ev || event;
var left = oEvent.clientX - this.disX;
var top = oEvent.clientY - this.disY;
this.oDiv.style.left = left + 'px';
this.oDiv.style.top = top + 'px';
}
//鼠标抬起来的时候释放鼠标移动以及抬起事件
Drag.prototype.fnUp = function(oAttr) {
oAttr.onmousemove = null;
oAttr.onmouseup = null;
//需要释放捕获的事件
if (oAttr.releaseCapture) {
oAttr.releaseCapture();
}
}
04 使用
new Drag( );
- new一个实例
- 可以重写父类的方法
05 封装函数源码与小例子
js文件可直接引用
Drag.js 框架下载
运用的例子
