复制代码代码如下::
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> 拖拽库 </title>
<style type = "text/css">
div, h2, p {margin: 0; padding: 0;}
Körper {Schrift: 14px/1,5 Arial;}
#box {width: 100px; Höhe: 100px; Hintergrund: #FEF4EB; Padding: 5px; Margin: 50px; Rand: 1px fest #f60;}
#box .title {Höhe: 25px; Hintergrund:#f60;}
#tool {Margin-Bottom: 10px;}
</style>
<script type = "text/javaScript">
Funktion Drag ()
{
// 初始化
this.initialize.apply (this, Argumente)
}
Drag.Prototype = {
// 初始化
initialisieren: Funktion (Drag, Optionen)
{
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 (Optionen);
this.handle = this. $ (this.options.handle);
this.maxContainer = this. $ (this.options.maxContainer);
this.maxtop = math.max (this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offseteight;
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: Funktion ()
{
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: Funktion (Ereignis)
{
var event = event || Fenster.Event;
this._x = event.clientX - this.drag.OffsetLeft;
this._y = event.clienty - this.drag.offsettop;
this.addHandler (Dokument, "Mousemove", this._Movedrag);
this.addHandler (Dokument, "Mauseup", this._stopdrag);
Event.PreventDefault && event.preventDefault ();
this.handle.setcapture && this.handle.setcapture ();
this.onstart ()
},
bewegt: Funktion (Ereignis)
{
var event = event || Fenster.Event;
var itop = event.clienty - this._y;
var ileft = event.clientX - this._x;
Wenn (this.lock) zurückkehren;
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: Funktion ()
{
this.removeHandler (Dokument, "Mousemove", this._Movedrag);
this.removeHandler (Dokument, "MouseUp", this._Stopdrag);
this.handle.releascapture && this.handle.releascapture ();
this.onstop ()
},
// 参数设置
Setoptionen: Funktion (Optionen)
{
this.options =
{
Handle: this.drag, // 事件对象
Grenze: Richtig, // 锁定范围
Sperre: Falsch, // 锁定位置
lockx: false, // 锁定水平位置
Locky: Falsch, // 锁定垂直位置
MaxContainer: document.documentElement || document.body, // 指定限制容器
onStart: function () {}, // 开始时回调函数
onmove: function () {}, // 拖拽时回调函数
onStop: function () {} // 停止时回调函数
};
Für (var p in Optionen) this.options [p] = Optionen [p]
},
// 获取 id
$: Funktion (ID)
{
Rückgabe typeof id == "String"? document.getElementById (ID): ID
},
// 添加绑定事件
AddHandler: Funktion (Oelement, SeventType, fnhandler)
{
return oelement.adDeVentListener? oelement.adDeventListener (siebtype, fnhandler, false): oelement.attachEvent ("on" + siebtype, fnhandler)
},
// 删除绑定事件
REMETHANDLER: Funktion (Oelement, SeventType, fnhandler)
{
return oelement.removeventListener? oelement.removeEventListener (siebtype, fnhandler, false): oelement.detAchEvent ("on" + siebentype, fnhandler)
},
// 绑定事件到对象
BIND: Funktion (Objekt, fnhandler)
{
Rückgabefunktion ()
{
Rückgabe fnhandler.apply (Objekt, Argumente)
}
}
};
// 应用
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 = Funktion ())
{
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 = "links:" + this.drag.offsetleft + ", oben:" + this.drag.offsettop
};
// 开始拖拽时方法
odrag.onstop = function ()
{
Ospan.innerhtml = "结束拖拽"
};
};
</script>
</head>
<body>
<div id = "Tool">
<Eingabe type = "Taste" value = "锁定范围" />
<Eingabe type = "Taste" value = "水平锁定" />
<Eingabe type = "Taste" value = "垂直锁定" />
<Eingabe type = "Taste" value = "锁定位置" />
</div>
<p> 拖放状态 ： <Pan> 未开始 </span> </p>
<div id = "box">
<H2> </H2>
</div>
</body>
</html>
</td>
</tr>
</table>