复制代码代码如下:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> 拖拽库 </title>
<type type = "text/css">
Div ، H2 ، P {Margin: 0 ؛ Padding: 0 ؛}
الجسم {font: 14px/1.5 arial ؛}
#box {width: 100px ؛ الارتفاع: 100px ؛ الخلفية: #fef4eb ؛ padding: 5px ؛ الهامش: 50px ؛ الحدود: 1px solid #f60 ؛}
#box .title {الارتفاع: 25px ؛ الخلفية:#f60 ؛}
#tool {margin-bottom: 10px ؛}
</style>
<script type = "text/javaScript">
وظيفة السحب ()
{
// 初始化
this.initialize.apply (هذا ، الحجج)
}
drag.prototype = {
// 初始化
تهيئة: الوظيفة (السحب ، الخيارات)
{
this.drag = this. $ (drag) ؛
this._x = this._y = 0 ؛
this._movedrag = this.bind (this ، this.movedrag) ؛
this._stopdrag = this.bind (this ، this.stopdrag) ؛
this.setOptions (الخيارات) ؛
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.bind (this ، this.startdrag))
} ،
changelayout: وظيفة ()
{
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 = event || window.event ؛
this._x = event.clientx - this.drag.offsetleft ؛
this._y = event.clienty - this.drag.offsettop ؛
this.addhandler (وثيقة ، "mousemove" ، this._movedrag) ؛
this.addhandler (وثيقة ، "mouseup" ، this._stopdrag) ؛
Event.PreventDefault && event.preventDefault () ؛
this.handle.setCapture && this.handle.setCapture () ؛
this.onstart ()
} ،
Sendrag: وظيفة (حدث)
{
var event = event || window.event ؛
var itop = event.clienty - this._y ؛
var ileft = event.clientx - this._x ؛
إذا (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: وظيفة ()
{
this.removeHandler (وثيقة ، "mousemove" ، this._movedrag) ؛
this.removeHandler (وثيقة ، "mouseup" ، this._stopdrag) ؛
this.handle.releasecapture && this.handle.releasecapture () ؛
this.onstop ()
} ،
// 参数设置
setOptions: وظيفة (خيارات)
{
this.options =
{
مقبض: this.drag ، // 事件对象
الحد: صحيح ، // 锁定范围
قفل: خطأ ، // 锁定位置
لوككس: خطأ ، // 锁定水平位置
Locky: خطأ ، // 锁定垂直位置
MaxContainer: document.documentElement || document.body ، // 指定限制容器
onStart: function () {} ، // 开始时回调函数
onMove: function () {} ، // 拖拽时回调函数
OnStop: Function () {} // 停止时回调函数
} ؛
لـ (var p في الخيارات) this.options [p] = الخيارات [p]
} ،
// 获取 id
$: وظيفة (معرف)
{
إرجاع typeof id === "سلسلة"؟ document.getElementById (id): id
} ،
// 添加绑定事件
AddHandler: Function (Oelement ، SeventType ، Fnhandler)
{
إرجاع oelement.addeventListener؟ oelement.addeventListener (SeventType ، Fnhandler ، false): Oelement.attachevent ("On" + SeventType ، Fnhandler)
} ،
// 删除绑定事件
removeHandler: وظيفة (OELEMENT ، 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") ؛
// 锁定范围接口
Ainput [0] .onclick = function ()
{
odrag.limit =! odrag.limit ؛
this.value = odrag.limit؟ "取消锁定范围": "锁定范围"
} ؛
// 水平锁定接口
AINPUT [1] .Onclick = function ()
{
odrag.lockx =! odrag.lockx ؛
this.value = odrag.lockx؟ "取消水平锁定": "水平锁定"
} ؛
// 垂直锁定接口
AINPUT [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>
<body>
<div id = "tool">
<type type = "button" value = "锁定范围" />
<type type = "button" value = "水平锁定" />
<type type = "button" value = "垂直锁定" />
<type type = "button" value = "锁定位置" />
</div>
<p> ： <span> 未开始 </span> </p>
<div id = "box">
<h2> </h2>
</div>
</body>
</html>
</td>
</r>
</table>