欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

javascript 拖动div

程序员文章站 2022-05-13 09:29:58
...
一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库,而我们有时候又得实现某个div层的拖动,这时候这个东东就派上用场了。。。

上传附件上传了好几次 上不去 。。。 贴代码吧/**
* js拖动类 目前一个对象只能够使一个容器得到拖动
* @author yulipu

* 用法1 普通div
*

* 这里是内容
*

* var drag = new YDrag();
* drag.drag({
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象
* dragX : false, //不允许横向拖动
* dragY : true
* });
*
* 用法2 模拟对话框
*

*
这里是标题

*
这里是内容

*

* var drag = new YDrag();
* drag.drag({
* targetDragObj : document.getElementById('outer'), //必须项 要拖动的目标对象
* srcDragObj : document.getElementById('title'), //非必须项 指定标题部分div
* dragX:false, //不允许横向拖动
* callback : function(){
//alert(this.x); // x坐标
//alert(this.y); // y坐标
} //指定一个回调函数 这个函数可以得到当前容器坐标位置
* });
*/
function YDrag() {
var diffX = 0; //当前鼠标和容器left距离的差 当前位置-这个差值就是容器的left值
var diffY = 0;
var _self = this;
var options = {};

var yE = {
/**
* 添加事件
* @param ele 要添加事件的元素
* @param type 事件类型 如click
* @param fun 回调函数
*/
bind : function(ele, type, fun) {
if(ele.addEventListener) { //FF
ele.addEventListener(type, fun, false);
}else if(ele.attachEvent) { //IE
ele.attachEvent('on' + type, fun);
} else { //DOM
ele['on'+type] = fun;
}
},

/**
* 删除事件
*/
unbind : function(ele, type, fun) {
if(ele.removeEventListener) {
ele.removeEventListener(type, fun, false);
} else if(ele.detachEvent) {
ele.detachEvent('on' + type, fun);
} else {
ele['on'+type] = null;
}
}
};

this._mousedown = function(e) {
e = e || window.event;
options.targetDragObj.style.position = 'absolute';

diffX = e.clientX - options.targetDragObj.offsetLeft; //初始化差值
diffY = e.clientY - options.targetDragObj.offsetTop;
yE.bind(document, 'mousemove', _self._mousemove); //往document上添加事件 当鼠标在document范围内移动式都触发移动事件
yE.bind(document, 'mouseup', _self._mouseup);
};

this._mousemove = function(e) {
e = e || window.event;
if(options.dragable) {
options.dragX && (options.targetDragObj.style.left = e.clientX - diffX + 'px');
options.dragY && (options.targetDragObj.style.top = e.clientY - diffY + 'px');
if(options.callback){
//返回当前容器坐标
var obj = {'x' : e.clientX - diffX, 'y' : e.clientY - diffY};
options.callback.call(obj);
}
}
};

this._mouseup = function(e) {
yE.unbind(document, 'mousemove', _self._mousemove);
yE.unbind(document, 'mouseup', _self._mouseup);
};

this.drag = function(opt) {
options = {
dragable : true,
targetDragObj : opt.targetDragObj,
srcDragObj : opt.srcDragObj,
dragX : opt.dragX != false, //横向拖动
dragY : opt.dragY != false, //纵向拖动
callback : opt.callback
};
if(options.srcDragObj) {options.srcDragObj.style.cursor='move';} else {options.targetDragObj.style.cursor='move'}
undefined == options.srcDragObj ?
yE.bind(options.targetDragObj, 'mousedown', this._mousedown) :
yE.bind(options.srcDragObj, 'mousedown', this._mousedown);
};
}

AD:真正免费,域名+虚机+企业邮箱=0元