复制代码代码如下:
<! 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">
<head>
<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; มาร์จิ้น: 50PX; ชายแดน: 1PX SOLID #F60;}
#Box .title {ความสูง: 25px; พื้นหลัง:#f60;}
#Tool {มาร์จิ้น-ด้านล่าง: 10px;}
</style>
<script type = "text/javascript">
ฟังก์ชั่นลาก ()
-
// 初始化
this.initialize.apply (ข้อโต้แย้งนี้)
-
drag.prototype = {
// 初始化
เริ่มต้น: ฟังก์ชั่น (Drag, Options)
-
this.drag = this. $ (drag);
this._x = this._y = 0;
this._movedrag = this.bind (นี่คือสิ่งนี้ movedrag);
this._stopDrag = this.bind (นี่คือ 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 = "ย้าย";
this.changelayout ();
this.addhandler (this.handle, "mousedown", this.bind (นี่, this.startdrag))
-
Changelayout: ฟังก์ชั่น ()
-
this.drag.style.top = this.drag.offsettop + "px";
this.drag.style.left = this.drag.offsetleft + "px";
this.drag.style.position = "สัมบูรณ์";
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 (เอกสาร, "mouseup", this._stopdrag);
Event.preventDefault && event.preventDefault ();
this.handle.setCapture && this.handle.setCapture ();
this.onstart ()
-
MovedRag: ฟังก์ชั่น (เหตุการณ์)
-
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: ฟังก์ชั่น ()
-
this.removehandler (เอกสาร, "Mousemove", this._movedrag);
this.removehandler (เอกสาร, "mouseup", this._stopdrag);
this.handle.releasecapture && this.handle.releasecapture ();
this.onstop ()
-
// 参数设置
SetOptions: ฟังก์ชั่น (ตัวเลือก)
-
this.options =
-
มือจับ: this.drag, // 事件对象
จำกัด : จริง, // 锁定范围
ล็อค: เท็จ // 锁定位置
Lockx: False, // 锁定水平位置
ล็อคกี้: เท็จ // 锁定垂直位置
MaxContainer: Document.DocumentElement || document.body, // 指定限制容器
onstart: function () {}, // 开始时回调函数
onmove: function () {}, // 拖拽时回调函数
onstop: function () {} // 停止时回调函数
-
สำหรับ (var p ในตัวเลือก) this.options [p] = ตัวเลือก [p]
-
// 获取 id
$: ฟังก์ชั่น (id)
-
return typeof id === "String"? document.getElementById (id): id
-
// 添加绑定事件
AddHandler: ฟังก์ชั่น (OELEMENT, SEVENTTYPE, FNHandler)
-
return oelement.addeventListener? OELEMENT.ADDEVENTLISTENER (SEVENTTYPE, FNHANDLER, FALSE): OELEMENT.ATTACHEVENT ("ON" + SEVENTYPE, FNHANDLER)
-
// 删除绑定事件
removeHandler: ฟังก์ชั่น (oelement, Seventtype, fnhandler)
-
return oelement.removeeVentListener? Oelement.removeeVentListener (Seventtype, Fnhandler, False): Oelement.detachevent ("On" + SeventType, FNHandler)
-
// 绑定事件到对象
ผูก: ฟังก์ชั่น (วัตถุ, fnhandler)
-
ฟังก์ชั่น return ()
-
ส่งคืน fnhandler.apply (วัตถุ, อาร์กิวเมนต์)
-
-
-
// 应用
window.onload = function ()
-
var obox = document.getElementById ("Box");
var otitle = obox.getElementsByTagname ("H2") [0];
var ospan = document.getElementsByTagname ("span") [0];
var odrag = การลากใหม่ (obox, {handle: otitle, ขีด จำกัด : false});
var ainput = document.getElementsByTagname ("อินพุต");
// 锁定范围接口
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 = ฟังก์ชั่น ()
-
ospan.innerhtml = "ซ้าย:" + this.drag.offsetleft + ", top:" + this.drag.offsetp
-
// 开始拖拽时方法
odrag.onstop = function ()
-
ospan.innerhtml = "结束拖拽"
-
-
</script>
</head>
<body>
<div id = "เครื่องมือ">
<อินพุต type = "ปุ่ม" value = "锁定范围" />
<อินพุต type = "ปุ่ม" value = "水平锁定" />
<อินพุต type = "ปุ่ม" value = "垂直锁定" />
<อินพุต type = "ปุ่ม" value = "锁定位置" />
</div>
<p> 拖放状态： <span> 未开始 </span> </p>
<div id = "box">
<H2> </h2>
</div>
</body>
</html>
</td>
</tr>
</table>