ด้วยการเปลี่ยนแปลงของยุคสมัย ความสำคัญของ js ไม่เพียงแต่สามารถสร้างเว็บเพจได้ (เช่น Ext framework) แต่ยังสร้างเอฟเฟกต์พิเศษบางอย่างของเว็บอีกด้วย กับโทรศัพท์มือถือ ท้ายที่สุดแล้ว มันขึ้นอยู่กับเบราว์เซอร์ไม่มีส่วนเกี่ยวข้องกับแพลตฟอร์ม ตอนนี้แอประบบ Windows 8 ของ Microsoft สามารถพัฒนาได้โดยใช้ js แล้ว หากคุณมีเวลาก็ลองดูได้
ตอนนี้เรามาถึงประเด็นและพูดคุยเกี่ยวกับวิธีใช้งาน Div แบบลากได้ใน js เพื่อให้บรรลุฟังก์ชันนี้ เรามาพูดถึงแนวคิดนี้กันก่อน:
1. บันทึกเหตุการณ์การเลื่อนเมาส์ลงของ div เมาส์
2. จับภาพเหตุการณ์ mousemove ของเอกสาร
3. ยกเลิกกิจกรรม
จากนั้นเรามาดูโค้ดกัน:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่นลาก (id) {
var $ = ฟังก์ชั่น (แฟล็ก) {
กลับ document.getElementById (ธง);
-
$(id).onmousedown = ฟังก์ชั่น (e) {
var d = เอกสาร;
หน้า var = {
เหตุการณ์: ฟังก์ชั่น (evt) {
var ev = evt ||. window.event;
กลับ ev;
-
pageX: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.pageX ||. (e.clientX + document.body.scrollLeft - document.body.clientLeft);
-
pageY: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.pageY ||. (e.clientY + document.body.scrollTop - document.body.clientTop);
-
layerX: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.layerX ||. e.offsetX;
-
layerY: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.layerY ||. e.offsetY;
-
-
var x = page.layerX(e);
var y = page.layerY(e);
ถ้า (dv.setCapture) {
dv.setCapture();
-
อื่นถ้า (window.captureEvents) {
window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
-
d.onmousemove = ฟังก์ชั่น (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
-
d.onmouseup = ฟังก์ชั่น () {
ถ้า (dv.releaseCapture) {
dv.releaseCapture();
-
อื่นถ้า (window.releaseEvents) {
window.releaseEvents (Event.MOUSEMOVE | Event.MOUSEUP);
-
d.onmousemove = โมฆะ;
d.onmouseup = null;
-
-
-
การวิเคราะห์รหัส:
1.
รับวัตถุ div
คัดลอกรหัสรหัสดังต่อไปนี้:
var $ = ฟังก์ชั่น (แฟล็ก) {
กลับ document.getElementById (ธง);
-
2. บันทึกเหตุการณ์การเลื่อนเมาส์ของเอกสาร:
มีโค้ดชิ้นนี้อยู่ในนั้น:
คัดลอกรหัสรหัสดังต่อไปนี้:
หน้า var = {
เหตุการณ์: ฟังก์ชั่น (evt) {
var ev = evt ||. window.event;
กลับ ev;
-
pageX: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.pageX ||. (e.clientX + document.body.scrollLeft - document.body.clientLeft);
-
pageY: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.pageY ||. (e.clientY + document.body.scrollTop - document.body.clientTop);
-
layerX: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.layerX ||. e.offsetX;
-
layerY: ฟังก์ชั่น (evt) {
var e = this.event (evt);
กลับ e.layerY ||. e.offsetY;
-
-
ในบรรดาเหตุการณ์เหล่านั้น เหตุการณ์จะได้รับเหตุการณ์ของเมาส์ pageX และ pageY ได้รับพิกัดของเมาส์ layerX และ layerY ได้รับระยะห่างระหว่างเมาส์และเส้นขอบ div
นอกจากนี้ยังมีโค้ดอีกชิ้นหนึ่ง:
คัดลอกรหัสรหัสดังต่อไปนี้:
ถ้า (dv.setCapture) {
dv.setCapture();
-
อื่นถ้า (window.captureEvents) {
window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
-
นี่คือการจับภาพเหตุการณ์ MouseMove และ MouseUp ของ div หากคุณไม่ทราบ tx คุณสามารถตรวจสอบได้ทางออนไลน์
3. เหตุการณ์ MouseMove และ mouseUp ของเอกสาร:
คัดลอกรหัสรหัสดังต่อไปนี้:
d.onmousemove = ฟังก์ชั่น (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
-
d.onmouseup = ฟังก์ชั่น () {
ถ้า (dv.releaseCapture) {
dv.releaseCapture();
-
อื่นถ้า (window.releaseEvents) {
window.releaseEvents (Event.MOUSEMOVE | Event.MOUSEUP);
-
d.onmousemove = โมฆะ;
d.onmouseup = null;
-
ในหมู่พวกเขา tx และ ty เป็นรหัสที่สำคัญที่สุดซึ่งใช้ในการตั้งค่าพิกัด div
บางคนอาจจะถามว่าทำไม -x,-y?
x, y จะได้ระยะห่างระหว่างเมาส์กับเส้นขอบ div หากไม่ได้ถูกลบออก
พิกัดของลูกศรของเมาส์จะเหมือนกับพิกัด x และ y ของ div หลังจากลาก ตำแหน่งเมาส์จะย้ายไปที่มุมซ้ายบน ผลที่ได้คือ มันจะเด้งกลับหลังจากลาก
คัดลอกรหัสรหัสดังต่อไปนี้:
ถ้า (dv.releaseCapture) {
dv.releaseCapture();
-
อื่นถ้า (window.releaseEvents) {
window.releaseEvents (Event.MOUSEMOVE | Event.MOUSEUP);
-
d.onmousemove = โมฆะ;
d.onmouseup = null;
รหัสข้างต้นคือการยกเลิกเหตุการณ์ onmousemove และ onmouseup ของเอกสารหลังจากที่ปล่อยเมาส์
ฉันได้เรียนรู้ js เมื่อเร็ว ๆ นี้ และฉันจะแบ่งปันประสบการณ์ใหม่ของฉันกับคุณในอนาคต ฉันหวังว่าจะเรียนรู้และก้าวหน้าไปพร้อมกับทุกคน