複製代碼代碼如下：
<！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>