บทความนี้แนะนำการใช้งานการลากองค์ประกอบใน JavaScript ดั้งเดิม
แนวคิด:
1. ก่อนเปลี่ยนแอตทริบิวต์เค้าโครงขององค์ประกอบที่ถูกลากคีย์คือ "ตำแหน่ง: Absolue";
2. จับเหตุการณ์เมาส์ "Mousedown", "Mousemove", "Mouseup";
3. เมื่อ "mousedown" ถูกเรียกใช้บันทึกตำแหน่งสัมพัทธ์ของเมาส์ปัจจุบันในองค์ประกอบ, _x, _y;
4. จากนั้นประมวลผลเหตุการณ์ "mousemove" และย้ายองค์ประกอบโดยการเปลี่ยนคุณลักษณะด้านบนและซ้ายขององค์ประกอบ;
5. เมื่อเวลา "Mouseup" ถูกเรียกใช้ให้หยุดลาก
ในเวลาเดียวกันควรพิจารณาการห่อหุ้มรหัสและความเข้ากันได้ของเบราว์เซอร์ รหัสมีดังนี้:
<! doctype html> <html> <head> <mhet> <title> draggable div </title> <style type = "text/css"> body {margin: 0; Padding: 0; พื้นหลังสี: #FFF; } #DRAG_DIV {WIDTH: 150PX; ความสูง: 150px; Padding: 10px; มาร์จิ้น: 10px; พื้นหลังสี: #66DD33; เคอร์เซอร์: ย้าย; } </style> </head> </html> <body> <div id = "drag_div"> </div> </body> <script type = "text/javascript"> function drag () {this.initialize.apply (นี้, อาร์กิวเมนต์); } drag.prototype = {// เริ่มต้นการเริ่มต้น: ฟังก์ชั่น (องค์ประกอบ, ตัวเลือก) {this.element = this. $ (องค์ประกอบ); // วัตถุที่ถูกลาก this._x = this._y = 0; // ตำแหน่งเมาส์ในองค์ประกอบ this._movedrag = this.bind (นี่คือสิ่งนี้ movedrag); this._stopDrag = this.bind (นี่คือสิ่งนี้ stopdrag); // ตั้งค่าพารามิเตอร์ this.setOptions (ตัวเลือก); // ตั้งค่าวัตถุ "handle" เป็น "ลาก" ด้วยเมาส์ (หมายเหตุความแตกต่างจากวัตถุที่ถูกลาก) this.handle = this. $ (this.options.handle); // ตั้งค่าฟังก์ชั่นการโทรกลับ 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)); }, // เปลี่ยนแอตทริบิวต์เลย์เอาต์ของการเปลี่ยนแปลงวัตถุที่ถูกลาก: ฟังก์ชัน () {this.element.style.top = this.element.offSettop + "px"; this.element.style.left = this.element.offsetleft + "px"; this.element.style.position = "สัมบูรณ์"; this.element.style.margin = "0"; }, startDrag: ฟังก์ชั่น (เหตุการณ์) {var event = เหตุการณ์ || window.event; this._x = event.clientx - this.element.offsetleft; this._y = event.clienty - this.element.offSettop; this.addhandler (เอกสาร, "Mousemove", this._movedrag); this.addhandler (เอกสาร, "mouseup", this._stopdrag); this.preventdefault (เหตุการณ์); this.handle.setCapture && this.handle.setCapture (); this.onstart (); }, MovedRag: ฟังก์ชั่น (เหตุการณ์) {var event = this.getEvent (เหตุการณ์); var itop = event.clienty - this._y; var ileft = event.clientx - this._x; this.element.style.top = itop + "px"; this.element.style.left = ileft + "px"; this.onmove (); }, stopDrag: function () {this.RemoveHandler (เอกสาร, "mousemove", this._movedrag); this.removehandler (เอกสาร, "mouseup", this._stopdrag); this.handle.releasecapture && this.handle.releasecapture (); this.onstop ()}, setOptions: ฟังก์ชัน (ตัวเลือก) {this.options = {handle: this.element, // วัตถุเหตุการณ์ onstart: function () {}, // ฟังก์ชั่นการเรียกใช้ onmove: function () {}, // การเรียกใช้ฟังก์ชัน onstop: function () {} // สำหรับ (var p ในตัวเลือก) {this.options [p] = ตัวเลือก [p]; }}, $: function (id) {return typeof id === "String"? document.getElementById (id): id; }, addHandler: ฟังก์ชั่น (องค์ประกอบ, EventType, Handler) {ถ้า (Element.addeVentListener) {return element.addeventListener (EventType, Handler, False); } else {return element.attachevent ("on"+entyType, handler); }}, removeHandler: ฟังก์ชั่น (องค์ประกอบ, eventtype, handler) {ถ้า (element.removeeVentListener) {return element.removeEventListener (EventType, Handler, False); } else {return element.detachevent ("on" + eventtype, handler); }}, getEvent: function (เหตุการณ์) {return event || window.event; }, PreventDefault: ฟังก์ชั่น (เหตุการณ์) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}, bind: function (obj, handler) {return function () {return handler.apply (obj, อาร์กิวเมนต์); - window.onload = function () {var drag_div = document.getElementById ("drag_div"); var drag = new drag (drag_div, {handle: drag_div}); } </script> </html>