การลาก เป็นสิ่งที่เจ๋งมาก คุณคลิกที่วัตถุค้างไว้ที่เมาส์เลื่อนเมาส์ไปยังพื้นที่อื่นและปล่อยปุ่มเมาส์เพื่อวางวัตถุที่นี่
นี่คือกรณีง่ายๆ:
ส่วน HTML: โปรดทราบว่าองค์ประกอบการลากจะต้องกำหนดอย่างแน่นอนนั่นคือตำแหน่ง = สัมบูรณ์;
การคัดลอกรหัสมีดังนี้: <div style = "ตำแหน่ง: สัมบูรณ์; ความสูง: 100px; ความกว้าง: 100px; พื้นหลัง: สีแดง"> </div>
<script src = "dome.js"> </script>
JS Part (dome.js):
var eventUtil = {// รับเหตุการณ์และเป้าหมาย getEvent: ฟังก์ชั่น (เหตุการณ์) {เหตุการณ์ส่งคืน? เหตุการณ์: window.event; }, getTarget: ฟังก์ชั่น (เหตุการณ์) {return event.target || เหตุการณ์. }, // เพิ่มการฟังเหตุการณ์ addevent: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.addeventListener) {element.addeventListener (ประเภท, ตัวจัดการ, เท็จ); } อื่นถ้า (element.attachevent) {element.attachevent ("on" + type, handler); }}, // ออกจากระบบการฟัง DELEVENT: ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (Element.RemoveEventListener) {Element.RemoveEventListener (ประเภท, handler, false); } อื่นถ้า (element.detachevent) {element.detachevent ("on" + type, handler); }}} var dragdrop = function () {// ธงเพื่อตรวจสอบว่าองค์ประกอบ DOM ถูกลากการลาก var = null; // ความแตกต่างระหว่างมุมซ้ายบนขององค์ประกอบ DOM และตัวชี้เมาส์คือ diffx = 0; diffy = 0; Function HandleEvent (เหตุการณ์) {Event = EventUt.GetEvent (เหตุการณ์); var target = eventutil.getTarget (เหตุการณ์); switch (event.type) {case "mousedown": // พิจารณาว่าคลาสขององค์ประกอบ DOM มีแอตทริบิวต์ draggable ถ้า (target.classname.indexof ("draggable")> -1) {dragging = target; diffx = event.clientx - target.offsetleft; diffy = event.clienty - target.offsettop; } หยุดพัก; กรณี "Mousemove": ถ้า (ลาก! = null) {target.style.left = event.clientx - diffx + "px"; target.style.top = event.clienty - diffy + "px"; } หยุดพัก; กรณี "mouseup": dragging = null; หยุดพัก; }} return {enable: function () {eventutil.addevent (เอกสาร, "mousedown", handleEvent); Eventutil.addevent (เอกสาร, "Mousemove", HandleEvent); Eventutil.addevent (เอกสาร, "Mouseup", HandleEvent); }, ปิดการใช้งาน: function () {eventutil.delevent (เอกสาร, "mousedown", handleEvent); Eventutil.delevent (เอกสาร, "Mousemove", HandleEvent); Eventutil.delevent (เอกสาร, "Mouseup", HandleEvent); }}} (); dragdrop.enable ();สิ่งที่ต้องอธิบายที่นี่คือ diffx และ diffy ซึ่งแสดงถึงความแตกต่างระหว่างมุมซ้ายบนขององค์ประกอบและตัวชี้เมาส์
diffx = x พิกัดของเมาส์ - ออฟเซ็ตของวัตถุองค์ประกอบ
diffy = y พิกัดของเมาส์ - ออฟเซ็ตต์ของวัตถุองค์ประกอบ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน