复制代码代码如下:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> 拖拽库 </TITAL>
<style type = "text / css">
div, h2, p {marge: 0; rembourrage: 0;}
corps {police: 14px / 1,5 Arial;}
#box {largeur: 100px; hauteur: 100px; arrière-plan: # fef4eb; rembourrage: 5px; marge: 50px; bordure: 1px solide # f60;}
#box .Title {hauteur: 25px; arrière-plan: # f60;}
#tool {margin-bassin: 10px;}
</ style>
<script type = "text / javascript">
Fonction Drag ()
{
// 初始化
this.Initialize.apply (ceci, arguments)
}
Drag.prototype = {
// 初始化
Initialiser: fonction (glisser, options)
{
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 (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.bind (this, this.startdrag))
},
ChangeLayout: function ()
{
this.drag.style.top = this.drag.offsettop + "px";
this.drag.style.left = this.drag.offsetleft + "px";
this.drag.style.position = "absolu";
this.drag.style.margin = "0"
},
StartDrag: fonction (événement)
{
var event = événement || window.event;
this._x = event.clientx - this.drag.offsetLeft;
this._y = event.clienty - this.drag.offsetTop;
this.addhandler (document, "MouseMove", this._MovedRag);
this.addhandler (document, "mouseup", this._stopdrag);
event.PreventDefault && event.PreventDefault ();
this.handle.setCapture && this.handle.setCapture ();
this.onstart ()
},
MOVERAG: fonction (événement)
{
var event = événement || window.event;
var itop = event.clienty - this._y;
var ileft = event.clientx - this._x;
if (this.lock) return;
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 (document, "MouseMove", this._MovedRag);
this.reMoveHandler (document, "sourisp", this._stopdrag);
this.handle.releasecapture && this.handle.releascapture ();
this.onstop ()
},
// 参数设置
setOptions: fonction (options)
{
this.options =
{
Handle: this.drag, // 事件对象
Limite: vrai, // 锁定范围
Lock: Faux, // 锁定位置
Lockx: False, // 锁定水平位置
LOCKY: FAUX, // 锁定垂直位置
MaxContainer: document.DocumentElement || document.body, // 指定限制容器
onStart: function () {}, // 开始时回调函数
onmove: function () {}, // 拖拽时回调函数
onstop: function () {} // 停止时回调函数
};
pour (var p dans les options) this.options [p] = options [p]
},
// 获取 id
$: fonction (id)
{
return typeof id === "String"? document.getElementById (id): id
},
// 添加绑定事件
AddHandler: Fonction (Oelement, SeventType, FnHandler)
{
return oelement.addeventListener? oelement.addeventListener (SeventType, fnhandler, false): Oelement.Attachevent ("ON" + SeventType, FnHandler)
},
// 删除绑定事件
Supprime Handler: Fonction (Oelement, SeventType, FnHandler)
{
return oelement.removeeventListener? Oelement.reMoveEventListener (SeventType, fnhandler, false): oelement.detachevent ("ON" + SeventType, fnhandler)
},
// 绑定事件到对象
lier: fonction (objet, fnhandler)
{
function de retour ()
{
return fnhandler.apply (objet, arguments)
}
}
};
// 应用
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 ("entrée");
// 锁定范围接口
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 + ", en haut:" + this.drag.offsetTop
};
// 开始拖拽时方法
odrag.onstop = function ()
{
oSpan.innerhtml = "结束拖拽"
};
};
</cript>
</ head>
<body>
<div id = "Tool">
<input type = "bouton" value = "锁定范围" />
<input type = "bouton" value = "水平锁定" />
<input type = "bouton" value = "垂直锁定" />
<input type = "bouton" value = "锁定位置" />
</div>
<p> 拖放状态 ： <span> 未开始 </span> </p>
<div id = "box">
<h2> </h2>
</div>
</docy>
</html>
</td>
</tr>
</ table>