拖拽是网页中经常用到的控件，因此封装了一个推拽类。
<script type="text/javascript">
/* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
* callback 移动过程中的回调函数
* });
*/
function dragDrop(option){
this.target=option.target;
this.dragX=option.dragX!=false;
this.dragY=option.dragY!=false;
this.disX=0;
this.disY=0;
this.bridge =option.bridge;
this.area=option.area;
this.callback=option.callback;
this.target.className="drag";
var _this=this;
this.bridge?this.brideg.onmousedown=function(e){ _this.mousedown(e)}:this.target.onmousedown=function(e){ _this.mousedown(e)}
}
dragDrop.prototype={
mousedown:function(e){
var e=e||event;
this.disX=e.clientX-this.target.offsetLeft;
this.disY=e.clientY-this.target.offsetTop;
this.target.style.cursor = 'move';
if(window.captureEvents){
e.stopPropagation();
e.preventDefault();}
else{
e.cancelBubble = true;
}
var _this=this;
var movehandler = function (e) {
_this.move(e)
};
var uphandler = function (e) {
_this.mouseup(e)
};
document.onmousemove=function(e){_this.move(e)}
document.onmouseup=function(e){_this.mouseup(e)}
},
move:function(e){
var e=e||event;
var moveX=e.clientX-this.disX;
var moveY=e.clientY-this.disY;
var _this=this;
if(this.area){
moveX < _this.area[0] && (moveX = this.area[0]); //left 最小值
moveX > _this.area[1] && (moveX = this.area[1]); //left 最大值
moveY < _this.area[2] && (moveY = this.area[2]); //top 最小值
moveY > _this.area[3] && (moveY = this.area[3]); //top 最大值
}
this.dragX && (this.target.style.left=moveX+'px');
this.dragY && (this.target.style.top=moveY+'px');
if(this.callback){
var obj = {moveX:moveX,moveY:moveY};
this.callback.call(this,obj)
}
return false
},
mouseup:function (e)
{
var e=e||event;
this.target.style.cursor = 'default';
var _this=this;
document.onmousemove=null;
document.onmouseup=null;
}
}
</script>
</head>
<body>
<div id="box1"></div>
//调用方法:
var box1=document.getElementById('box1');
var d1=new dragDrop({
target:box1,
area :[0,document.body.clientWidth-100,0,document.body.clientHeight-100],
callback:function(obj){
box1.innerHTML='x:'+obj.moveX;
}
})
</body> </html>
