拖动类(重写版)

来源：互联网发布：centos netcat 编辑：程序博客网时间：2024/06/05 05:38

由于项目需要，今天把以前写的拖动类翻了出来，发现很多不合适的地方，于是重新构造了这个类。收录在这里，供大家研究。上次的autoComplete有朋友抱怨缺少注释，这次特意加上了详细的注释。

* Dragger Class

* Author:Robin Chen (robchen@126.com)

/* Dragger Class */

//元素拖动类

//调用示例：var dg = new Dragger({

// target:'div', //target可以为元素id或者元素本身的引用

// controller:'div', //controller为响应鼠标动作的元素，来控制目标的拖动。可以为id也可以为元素引用。可选参数，默认为对象元素本身。

// handler: new DraggerHandler({ //handler为自定义事件处理句柄,可选参数。

// onStartDragging:function(){...},

// onDragging:function(){...},

// onStopDragging:function(){...}

// )

// }

var Dragger = function(params){

//保存引用到实例列表

Dragger.instances.push(this);

//检查浏览器

Dragger.checkBrowser();

//公共属性obj：拖动对象元素

this.obj = Dragger.getElement(params.target);

this.obj.dragController = this;

//公共属性controller:拖动控制元素

if(params.controller){

this.controller = Dragger.getElement(params.controller);

}else{

this.controller = this.obj;

}

//公共属性,自定义事件处理句柄

this.userHandler = params.handler || null;

//公共属性hanlder,

this.controller.dragController = this;

this.controller.dragTarget = this.obj;

/* 私有属性 */

//当前对象的引用

var __this = this;

//当前是否能够拖动

var dragable = false;

//鼠标位置缓存

var mousePosition = null;

//对象位置缓存

var elementPosition = Dragger.getElementPosition(this.obj);

/* 私有方法 */

//鼠标按下事件句柄

var mouseDownHandler = function(evt){

if(!__this.dragMode)return;

var evt = evt || event;

var target = evt.target || evt.srcElement;

dragable = true;

mousePosition = Dragger.getMousePosition(evt);
elementPosition = Dragger.getElementPosition(__this.obj);

Dragger.Event.bind(document.body,'mousemove',mouseMoveHandler,true);

if(__this.userHandler)__this.userHandler.onStartDragging.apply(__this,arguments);

}

//鼠标松开事件句柄

var mouseUpHandler = function(evt){

if(!__this.dragMode)return;

var evt = evt || event;

dragable = false;

mousePosition = null;

Dragger.Event.remove(document.body,'mousemove',mouseMoveHandler,true);

if(__this.userHandler)__this.userHandler.onStopDragging.apply(__this,arguments);

}

//鼠标移动事件句柄

var mouseMoveHandler = function(evt){

if(!__this.dragMode)return;

if(!dragable)return;

var evt = evt || event;

var currentMousePosition = Dragger.getMousePosition(evt);

__this.obj.style.left = elementPosition[0] + currentMousePosition[0] - mousePosition[0] + 'px';

__this.obj.style.top = elementPosition[1] + currentMousePosition[1] - mousePosition[1] + 'px';

elementPosition = [__this.obj.offsetLeft,__this.obj.offsetTop];

mousePosition = currentMousePosition;

if(__this.userHandler)__this.userHandler.onDragging.apply(__this,arguments);

}

//鼠标划过事件句柄

var mouseOverHandler = function(){

if(parseInt(__this.obj.style.zIndex) == Dragger.zIndex)return;

__this.obj.style.zIndex = ++ Dragger.zIndex;

}

//绑定事件处理

Dragger.Event.bind(this.controller,'mousedown',mouseDownHandler);

Dragger.Event.bind(document.body,'mouseup',mouseUpHandler);

Dragger.Event.bind(this.obj,'mouseover',mouseOverHandler);

}

/* 公共属性和方法 */

Dragger.prototype = {

//是否能够拖动

dragMode:true,

//打开拖动模式

dragModeOn:function(){

this.dragMode = true;

//关闭拖动模式

dragModeOff:function(){

this.dragMode = false;

}

/* 静态属性和方法 */

//深度

Dragger.zIndex = 1000;

//检查浏览器

Dragger.checkBrowser = function(){

if(!this.browser){

//静态属性,浏览器信息

this.browser = {};

if(window.ActiveXObject){

this.browser.type = 'ie';

if(window.XMLHttpRequest){

this.browser.ver = 'ie7';

}else{

this.browser.ver = 'ie6';

}

}else{

this.browser.type = 'gecko';

}

//绑定和取消绑定事件

Dragger.Event = {

//绑定事件处理

bind:function(obj,evt,handler){

var capture = !!arguments[3];

if(Dragger.browser.type == 'ie'){

obj.attachEvent('on' + evt,handler);

if(capture)obj.setCapture();

}else{

obj.addEventListener(evt,handler,capture);

}

//取消事件处理

remove:function(obj,evt,handler){

var capture = !!arguments[3];

if(Dragger.browser.type == 'ie'){

obj.detachEvent('on' + evt,handler);

if(capture)obj.releaseCapture();

}else{

obj.removeEventListener(evt,handler,capture);

}

//取得元素对象的引用

//参数obj可以为元素的id或者元素本身

Dragger.getElement = function(obj){

if(typeof obj == 'string'){

return document.getElementById(obj);

}else{

return obj;

}

//取得当前鼠标实际位置

Dragger.getMousePosition = function(evt){

if(document.documentElement){

var scrollTop = document.documentElement.scrollTop;

var scrollLeft = document.documentElement.scrollLeft;

}else{

var scrollTop = document.body.scrollTop;

var scrollLeft = document.body.scrollLeft;

}

return [evt.clientX + scrollLeft,evt.clientY + scrollTop];

}

//取得元素实际位置

Dragger.getElementPosition = function(element){

var obj = element;

var left = 0;

var top = 0;

try{

while(obj && obj.style){

left += parseInt(obj.offsetLeft) || 0;

top += parseInt(obj.offsetTop) || 0;

obj = obj.parentNode;

}

}catch(e){}

return [left,top];

}

//当前页面所有Dragger实例

Dragger.instances = [];

//Dragger Hanlder Class

//Dragger事件句柄类，提供用户自定义事件

//使用示例: new DraggerHandler({

// onStartDragging:function(){...},

// onDragging:function(){...},

// onStopDragging:function(){...}

// );

//三个事件句柄都为可选项

var DraggerHandler = function(handler){

//开始拖动事件句柄

this.onStartDragging = handler.onStartDragging || function(){};

//拖动中事件句柄

this.onDragging = handler.onDragging || function(){};

//结束拖动事件句柄

this.onStopDragging = handler.onStopDragging || function(){};

}

DraggerHandler.prototype = {

//重新绑定所有事件句柄

reload:function(handler){

this.onStartDragging = handler.onStartDragging || function(){};

this.onDragging = handler.onDragging || function(){};

this.onStopDragging = handler.onStopDragging || function(){};

//清除所有事件句柄

clear:function(){

this.onStartDragging = this.onDragging = this.onStopDragging = function(){}

}

使用实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Dragger</title>

window.onload = function(){

var myHandler1 = new DraggerHandler({

onStartDragging:function(){

this.obj.style.filter = 'alpha(opacity=50)';

this.obj.style.MozOpacity = '0.5';

this.obj.style.Opacity = '0.5';

onStopDragging:function(){

this.obj.style.filter = 'alpha(opacity=100)';

this.obj.style.MozOpacity = '1.0';

this.obj.style.Opacity = '1.0';

}

})

var myHandler2 = new DraggerHandler({

onStartDragging:function(){

this.obj.style.border = '10px solid #FFCC00';

onStopDragging:function(){

this.obj.style.border = '1px solid black';

}

});

var dg1 = new Dragger({target:'div1',handler:myHandler1});

var dg2 = new Dragger({target:document.getElementById('div2'),handler:myHandler2});

var dg3 = new Dragger({target:document.getElementsByTagName('div')[2],handler:myHandler1});

var dg4 = new Dragger({target:'div4',controller:'div5',handler:myHandler1});

}

</script>

</head>

<body>

</body>

</html>

演示地址为：http://www.robchen.cn/drag/