ตัวอย่างในบทความนี้จะแชร์โค้ดเฉพาะสำหรับการตระหนักถึงเอฟเฟกต์การลากเมาส์ใน JavaScript สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมี
ดังนี้
ฉันคิดว่าความยากของการทดลองนี้คือการรักษาตำแหน่งสัมพัทธ์ของกล่องและเมาส์ให้ไม่เปลี่ยนแปลง ทำอย่างไรจึงจะได้เอฟเฟกต์การลากโดยการกดและเลื่อน
เมาส์
เราจำเป็นต้องใช้สามฟังก์ชัน: onmousedown , onmousemove และ onmouseup ซึ่งตามลำดับแทนการกดเมาส์ การเคลื่อนเมาส์ และการยกเมาส์ ตามลำดับ
ในฟังก์ชันการโทรกลับของ การกดเมาส์ เราจำเป็นต้องได้รับตำแหน่งเริ่มต้นของเมาส์ผ่าน clientX และ clientY และผ่าน offsetLeft และ offsetTop จะได้รับตำแหน่งเริ่มต้นของกล่อง จากนั้นคำนวณความแตกต่างระหว่างตำแหน่งเริ่มต้นของเมาส์และตำแหน่งเริ่มต้นของกล่อง
ในฟังก์ชันการเรียกกลับของ การเคลื่อนไหวของเมาส์ เราจำเป็นต้องได้รับตำแหน่งปัจจุบันของ กล่องตามความแตกต่างระหว่างตำแหน่งเมาส์และตำแหน่งที่คำนวณไว้ก่อนหน้า แล้วเปลี่ยนค่าด้านซ้ายและค่าบนสุด อย่าลืมตั้งค่าตำแหน่งเป็นสัมบูรณ์ (เพราะฉันเพิ่งลืม...)
ในฟังก์ชันโทรกลับ ของ การยกเมาส์ เราต้องล้างการเคลื่อนไหวของเมาส์และการยกเมาส์โดยตั้งค่า onmousemove และ onmouseup เป็น nullยัง
ให้ ความสนใจ! - -
ทั้งฟังก์ชันการเลื่อนเมาส์และฟังก์ชันการยกเมาส์จะต้องเขียนในฟังก์ชันการกดเมาส์ เนื่องจากเราจำเป็นต้องออกแบบพฤติกรรมที่ตามมาหลังจากการกดเมาส์ และ จุดที่สำคัญมากคือ:
ฟังก์ชันการกดเมาส์คือ p และเมาส์ การเลื่อนและการยกเมาส์อยู่ในเอกสาร
เพราะเราไม่ได้หมายถึงการเลื่อนเมาส์ใน p แต่ย้ายทั้งหน้า
ประเด็นสำคัญน่าจะเป็นดังนี้:
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>เอกสาร</title>
<สไตล์>
#กล่อง{
ความกว้าง: 100px;
ความสูง: 100px;
สีพื้นหลัง: พลอยสีฟ้า;
รัศมีเส้นขอบ: 14px;
กล่องเงา: 2px 2px 6px rgba (0,0,0,.3);
/* คนดีอยากขยับเปลี่ยนซ้ายไม่กำหนดตำแหน่ง - - -
ตำแหน่ง: แน่นอน;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="กล่อง"></div>
<สคริปต์>
ให้กล่อง=document.getElementById("กล่อง");
box.onmousedown=function(เหตุการณ์){
ให้ disx=event.clientX-box.offsetLeft;
ให้ disy=event.clientY-box.offsetTop;
//นี่ไม่ใช่ box.onmousemove แต่เป็น document.onmousemove
document.onmousemove=function(เหตุการณ์){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
-
//จะเขียนใน omniusedown document.onmouseup=function(){
//ทั้งสองอย่างนี้จะต้องตั้งค่าเป็นโมฆะ
เอกสาร.onmousemove=null;
document.onmouseup=null;
กลับเท็จ;
-
-
</สคริปต์>
</ร่างกาย>
</html> คำแนะนำที่เกี่ยวข้อง: [วิดีโอสอน JavaScript]
ด้านบนคือเนื้อหาโดยละเอียดของ js เพื่อจำลองเหตุการณ์การลากเมาส์ (พร้อมตัวอย่างรูปภาพและข้อความ) สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ภาษาจีน PHP !
