複製代碼代碼如下:
<!Doctype HTML公共“ - // W3C // DTD XHTML 1.0 Transitional // en”“” http://www.org/tr/tr/xhtml1/dtd/xhtml1-xhtml1-transitional.transitional.dtdd'>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<頭>
<meta http-equiv =“ content-type” content =“ text /html; charset = utf-8” />
<title>拖拽庫</title>
<style type =“ text/css”>
Div,H2,P {Margin:0; Padding:0;}
身體{字體:14px/1.5 arial;}
#box {width:100px;高度:100px;背景:#fef4eb; padding:5px; margin:50px; border:1px solid#f60;}
#box .title {高度:25px; background:#f60;}
#Tool {Margin-Bottom:10px;}
</style>
<腳本類型=“ text/javascript”>
功能拖動()
{
//初始化
this.initialize.apply(這個,參數)
}
drag.prototype = {
//初始化
初始化:功能(拖動,選項)
{
this.drag = this。$(drag);
this._x = this._y = 0;
this._movedrag = this.bind(this,this.moverrag);
this._stopdrag = this.bind(this,this.stopdrag);
this.setoptions(options);
this.handle = this。$(this.options.handle);
this.maxContainer =this。$(this.options.maxcontainer);
this.maxtop = math.max(this.maxcontainer.clientheight,this.maxcontainer.scrollheight) - this.drag.offsetheight;
this.maxleft = math.max(this.maxcontainer.clientwidth,this.maxcontainer.scrollwidth) - this.drag.offsetWidth;
this.limit = this.options.limit;
this.lockx = this.options.lockx;
this.locky = this.options.locky;
this.lock = this.options.lock;
this.onstart = this.options.onstart;
this.onmove = this.options.onmove;
this.onstop = this.options.onstop;
this.handle.style.cursor =“ move”;
this.changelayout();
this.addhandler(this.handle,“ mousedown”,this。
},,
changelayout:function()
{
this.drag.style.top = this.drag.offsettop +“ px”;
this.drag.style.left = this.drag.offsetleft +“ px”;
this.drag.style.position =“ absolute”;
this.drag.style.margin =“ 0”
},,
StartDrag:功能(事件)
{
var event =事件|| window.event;
this._x = event.clientx -this.drag.offsetleft;
this._y = event.clienty -this.drag.offsettop;
this.addhandler(文檔,“ mousemove”,this._movedrag);
this.addhandler(文檔,“鼠標”,this._stopdrag);
event.preventdefault && event.preventdefault();
this.handle.setCapture && this.handle.setCapture();
this.onstart()
},,
MOVETRAG:功能(事件)
{
var event =事件|| window.event;
var itop = event.clienty -this._y;
var ileft = event.clientx -this._x;
if(this.lock)返回;
this.limit &&(itop <0 &&(itop = 0),ileft <0 &&(ileft = 0),itop> this.maxtop &&(itop = this.maxtop),ileft> this.maxleft &&(ileft = this。 maxleft));
this.locky || (this.drag.style.top = itop +“ px”);
this.lockx || (this.drag.style.left = ileft +“ px”);
event.preventdefault && event.preventdefault();
this.onmove()
},,
stopdrag:function()
{
this.removehandler(文檔,“ mousemove”,this._movedrag);
this.removehandler(文檔,“鼠標”,this._stopdrag);
this.handle.releasecapture && this.handle.releasecapture();
this.onstop()
},,
//參數設置
setOptions:功能(選項)
{
this.options =
{
處理:this.drag,//事件對象
限制:正確,//鎖定範圍
鎖:false,//鎖定位置
lockx:false,//鎖定水平位置
locky:false,//鎖定垂直位置
maxContainer:document.documentElement || document.body,//指定限制容器
onstart:function(){},//開始時回調函數
onMove:function(){},//拖拽時回調函數
onstop:function(){} //停止時回調函數
};
對於(選項中的var p)this.options [p] = options [p]
},,
// ID
$:功能(ID)
{
返回類型ID ===“字符串”? document.getElementById(id):id
},,
//添加綁定事件
ADDHANDLER:功能(OELEMENT,SEVENTTYPE,FNHANDLER)
{
返回oelement.addeventlistener? olelement.AddeventListener(SeventType,fnhandler,false):olelement.attachevent(“ on” + seventtype,fnhandler)
},,
//刪除綁定事件
刪除Handler:功能(olelement,SeventType,fnhandler)
{
返回oelement.removeeventlistener? oelement.removeeventlistener(seventtype,fnhandler,false):oelement.detachevent(“ on” + seventtype,fnhandler)
},,
//綁定事件到對象
綁定:函數(對象,fnhandler)
{
返回功能()
{
返回fnhandler.apply(對象,參數)
}
}
};
//應用
window.onload = function()
{
var obox = document.getElementById(“ box”);
var otitle = obox.getElementsbytagname(“ h2”)[0];
var ospan = document.getElementsbytagname(“ span”)[0];
var odrag = new drag(obox,{handle:otitle,limit:false});
var ainput = document.getElementsBytagName(“ input”);
//鎖定範圍接口
aintup [0] .onclick = function()
{
odrag.limit =!odrag.limit;
this.value = odrag.limit? “取消鎖定範圍”:“鎖定範圍”
};
//水平鎖定接口
ainput [1] .onclick = function()
{
odrag.lockx =!odrag.lockx;
this.value = odrag.lockx? “取消水平鎖定”:“水平鎖定”
};
//垂直鎖定接口
aintup [2] .onclick = function()
{
odrag.locky =!odrag.locky;
this.value = odrag.locky? “取消垂直鎖定”:“垂直鎖定”
};
//鎖定位置接口
ainput [3] .onclick = function()
{
odrag.lock =!odrag.lock;
this.value = odrag.lock? “取消鎖定位置”:“鎖定位置”
};
//開始拖拽時方法
odrag.onstart = function()
{
ospan.innerhtml =“開始拖拽”
};
//開始拖拽時方法
odrag.onmove = function()
{
ospan.innerhtml =“ left:” + this.drag.offsetleft +“,top:” + this.drag.offsettop
};
//開始拖拽時方法
odrag.onstop = function()
{
ospan.innerhtml =“結束拖拽”
};
};
</script>
</head>
<身體>
<div id =“ tool”>
<輸入type =“ button” value =“鎖定範圍” />
<輸入type =“ button” value =“水平鎖定” />
<輸入type =“ button” value =“垂直鎖定” />
<輸入type =“ button” value =“鎖定位置” />
</div>
<p>拖放狀態:<span> </span> </p>
<div ID =“ box”>
<H2> </h2>
</div>
</body>
</html>
</td>
</tr>
</table>