复制代码代码如下：
<！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>