API การลากและวางเป็นคุณสมบัติใหม่ของ HTML5 เมื่อเทียบกับคุณสมบัติใหม่อื่น ๆ มันมีความสำคัญ 60% และการใช้งานจริง 30% ในการพัฒนาจริง
2. การลากแล้วปล่อยคืออะไร?ลาก: ลาก
ปล่อย: วาง
การลากหมายถึงการคลิกเมาส์บนวัตถุต้นทางและเคลื่อนย้ายวัตถุอย่างต่อเนื่องโดยไม่ปล่อยมือ วัตถุนั้นจะถูกปล่อย
3. ออบเจ็กต์ต้นทางและออบเจ็กต์เป้าหมายคืออะไร?วัตถุต้นทาง: หมายถึงสิ่งที่เราคลิกด้วยเมาส์ อาจเป็นรูปภาพ DIV ชิ้นส่วนของข้อความ ฯลฯ
วัตถุเป้าหมาย: หมายถึงเมื่อเราลากวัตถุต้นทางแล้วย้ายไปยังพื้นที่ วัตถุต้นทางสามารถเข้าสู่พื้นที่นี้ วางเมาส์เหนือพื้นที่นี้ (โดยไม่ต้องปล่อย) และปล่อยวัตถุต้นทางที่นี่ (ปล่อยแล้ว) ยังสามารถออกจากพื้นที่ได้หลังจากโฉบลง
4. ฟังก์ชั่นที่เกี่ยวข้องของการลากและวาง APIหลังจากอธิบายว่าออบเจ็กต์ต้นทางและออบเจ็กต์เป้าหมายคืออะไรแล้ว ให้กลับไปที่ API การลากและวางในส่วนหน้า จากการดำเนินการข้างต้น เราสามารถรับฟังก์ชันต่างๆ ได้
เหตุการณ์ที่สามารถทริกเกอร์โดยออบเจ็กต์ต้นทางที่ถูกลาก:
(1)ondragstart: วัตถุต้นทางเริ่มที่จะถูกลาก
(2)ondrag: วัตถุต้นฉบับกำลังถูกลาก (เมาส์อาจจะเคลื่อนที่หรือไม่ก็ได้)
(3)ondragend: วัตถุต้นทางถูกลากไปยังจุดสิ้นสุด
ลากออบเจ็กต์ต้นทางเพื่อเข้าสู่เหตุการณ์ที่ออบเจ็กต์เป้าหมายด้านบนสามารถทริกเกอร์ได้:
(1)ondragenter: วัตถุเป้าหมายถูกลากเข้าไปในวัตถุต้นทาง
(2) ondragover: วัตถุเป้าหมายถูกลากโดยวัตถุต้นทางและโฮเวอร์เหนือวัตถุนั้น
(3)ondragleave: วัตถุต้นทางถูกลากออกจากวัตถุเป้าหมาย
(4) ondrop: ลากวัตถุต้นทางแล้วปล่อย/ปล่อยไปเหนือวัตถุเป้าหมาย
API การลากและวางมีทั้งหมด 7 ฟังก์ชัน! -
5. วิธีการถ่ายโอนข้อมูลระหว่างเหตุการณ์ออบเจ็กต์ต้นทางที่ถูกลากและเหตุการณ์ออบเจ็กต์เป้าหมายHTML5 ให้แอตทริบิวต์ใหม่สำหรับเหตุการณ์ที่เกี่ยวข้องกับการลากทั้งหมด:
e.dataTransfer { } //数据传递对象
ฟังก์ชั่น: ใช้เพื่อส่งข้อมูลระหว่างเหตุการณ์ของวัตถุต้นทางและวัตถุเป้าหมาย
บันทึกข้อมูลในตัวจัดการเหตุการณ์บนวัตถุต้นทาง:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
อ่านข้อมูลในตัวจัดการเหตุการณ์บนวัตถุเป้าหมาย:
var v = e.dataTransfer.getData(k);
ตัวอย่างที่ 1: ติดตั้งเครื่องบินขนาดเล็กที่สามารถเคลื่อนที่ได้เมื่อลากเมาส์
เคล็ดลับ: เครื่องบินจะต้องอยู่ในตำแหน่งที่แน่นอน! รับค่าพิกัดของเมาส์ในเหตุการณ์ ondrag! - -
รหัสมีดังนี้:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ ระยะขอบ:0; ตำแหน่ง: ญาติ; } img{ ตำแหน่ง:สัมบูรณ์; </style> </head> <body> <h3>ระนาบขนาดเล็กที่เคลื่อนที่ขณะลากเมาส์</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('แหล่งเหตุการณ์ p3 เริ่มลาก'); //บันทึกออฟเซ็ตของเมาส์บนเครื่องบินหลังจากลาก offsetX= e.offsetX; offsetY= } p3 .ondrag=function(e){ console.log('แหล่งเหตุการณ์ p3 กำลังถูกลาก'); var x= e.pageX; console.log(x+'-'+y); //ในช่วงสุดท้ายของเหตุการณ์ลาก พิกัดของเมาส์ไม่สามารถอ่านได้ และทั้ง pageX และ pageY จะกลายเป็น 0 ถ้า(x==0 && y==0 ){ return; // อย่าจัดการกับสถานการณ์ที่ทั้ง X และ Y เป็น 0 ในวินาทีสุดท้ายของการลาก} x-=offsetX; y-=offsetY; p3.style.left=x+'px'; ด้านบน=y+'px'; } p3.ondragend=function(){ console.log('การลากวัตถุต้นทาง p3'); } </script> </body> </html>เอฟเฟกต์มีดังนี้:
ตัวอย่างที่สอง:
จำลองเอฟเฟกต์ของถังขยะในคอมพิวเตอร์ เครื่องบินขนาดเล็กทั้งหมดสามลำจะปรากฏขึ้นหลังจากลากเครื่องบินขนาดเล็กไปที่ด้านบนของถังขยะ เครื่องบินขนาดเล็กจะถูกลบออกจากแผนผัง DOM
เคล็ดลับ: การลบจำเป็นต้องลบองค์ประกอบออกจากโหนดลูก DOM และพฤติกรรมเริ่มต้นของ ondragover จำเป็นต้องได้รับการป้องกัน! - ใช้การถ่ายโอนข้อมูลระหว่างวัตถุต้นทางและวัตถุเป้าหมายเพื่อบันทึกค่า ID ของเครื่องบินขนาดเล็ก! - -
ข้อมูลสำคัญ:
ondragover มีพฤติกรรมเริ่มต้น! - - นั่นคือเมื่อ ondragover ถูกกระตุ้น ondrop จะล้มเหลว! - - - นี่อาจเป็นปัญหาเวอร์ชันของเบราว์เซอร์ ซึ่งอาจแก้ไขได้ก็ต่อเมื่อมีการอัปเดตเบราว์เซอร์อย่างต่อเนื่องในอนาคต! -
จะหยุดมันได้อย่างไร?
ondragover= function(e){ //เมื่อออบเจ็กต์ต้นทางวางเมาส์เหนือออบเจ็กต์เป้าหมาย e.preventDefault(); // ป้องกันพฤติกรรมเริ่มต้นเพื่อให้การดรอปสามารถทริกเกอร์...}ondrop= function(e){ // The วัตถุต้นทางถูกปล่อยออกมาในวัตถุเป้าหมาย...}รหัสมีดังนี้:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center; } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>ลบองค์ประกอบย่อยออกจากแผนผัง DOM หลังจากลากเครื่องบินไปที่ถังขยะ</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 คลาส =src src=img/p5.png> <script> //เพิ่มการตรวจสอบเหตุการณ์สำหรับออบเจ็กต์ต้นทาง - บันทึกว่า var ของออบเจ็กต์ต้นทางใดถูกลาก srcList = document.querySelectorAll('.src');// ค้นหาองค์ประกอบ img ทั้งหมดสำหรับ (var i=0; i<srcList.length; i++){ // สำรวจองค์ประกอบ img var p = srcList[i]; = function(e){ //เริ่มลากออบเจ็กต์ต้นทาง e.dataTransfer.setData('PlaneID',this.id); //บันทึกข้อมูล--id ขององค์ประกอบ img } p.ondrag = function(){} p.ondragend = function(){} } //เพิ่มเหตุการณ์การฟังสำหรับออบเจ็กต์เป้าหมาย - ลบออบเจ็กต์ต้นทางที่ถูกลากถังขยะ.ondragenter = function(){ //ออบเจ็กต์ต้นทางเข้าสู่เป้าหมาย object console .log('drag enter');ถังขยะ.style.opacity = 1; //เปลี่ยนความโปร่งใสเป็น 1 }ถังขยะ.ondragleave= function(){ //หลังจากวัตถุต้นทางออกจากวัตถุเป้าหมาย console.log(' ลากออก'); ถังขยะ.style.opacity = .2; //เปลี่ยนความโปร่งใสเป็น 0.2 } ถังขยะ.ondragover= function(e){/ //วัตถุต้นทางกำลังโฮเวอร์เหนือวัตถุเป้าหมาย e.preventDefault(); //ป้องกันพฤติกรรมเริ่มต้น, Make drop triggerable}ถังขยะ.ondrop= function(e){ //วัตถุต้นทางถูกเผยแพร่ในวัตถุเป้าหมาย console.log('drop');ถังขยะ.style.opacity = .2; //เปลี่ยนความโปร่งใสเป็น 0.2; //ลบวัตถุต้นทางที่ถูกลาก var id = e.dataTransfer.getData('PlaneID'); //รับข้อมูล--ค่า id var p = document.getElementById(id); //ค้นหาองค์ประกอบที่เกี่ยวข้องตามค่า id p parentNode.removeChild(p); //ลบโหนดย่อยออกจากองค์ประกอบหลัก} </script> </body> </html>เอฟเฟกต์มีดังนี้:
หลังจากลากเครื่องบินลำเล็กไปที่ถังขยะเพื่อลบ:
ตามที่แสดงในภาพ เดิมทีมีเครื่องบินเล็กสามลำ แต่ตอนนี้มีสองลำ! - -
6. ความรู้เพิ่มเติมเกี่ยวกับการลากและวาง API! - (ที่สำคัญอาจโดนถามตอนสัมภาษณ์!!)คำถามสัมภาษณ์:
จะแสดงรูปภาพจากไคลเอนต์ (คอมพิวเตอร์) ในหน้าเว็บได้อย่างไร?
จะลากหน้าเว็บของลูกค้าเพื่อแสดงในหน้าดาวน์โหลดฝั่งเซิร์ฟเวอร์ได้อย่างไร
สองคำถามนี้หมายความว่าอย่างไร?
โดยปกติเราจะลากและวางรูปภาพจากคอมพิวเตอร์ไปยังเบราว์เซอร์เพื่อดำเนินการดาวน์โหลด! - - ตามมาตรฐานก่อน H5 เป็นไปไม่ได้ที่จะลากและวางรูปภาพไปยังเบราว์เซอร์เพื่อแสดงโดยตรง! - แต่เนื่องจากคุณสมบัติใหม่ของ H5 ออกมา จึงมีการเพิ่มฟีเจอร์ของการลากและวาง API ซึ่งทำให้ฟังก์ชั่นนี้สมบูรณ์แบบ! - -
โอกาสในการสมัคร:
บนเว็บไซต์บางแห่ง ให้อัปโหลดรูปภาพเป็นรูปประจำตัว
อัปโหลดรูปภาพ...
วัตถุการดำเนินการไฟล์ใหม่ใน HTML5:
ไฟล์: หมายถึงวัตถุไฟล์
FileList: แสดงถึงวัตถุรายการไฟล์ที่มีลักษณะคล้ายอาร์เรย์
FileReader: ใช้เพื่ออ่านข้อมูลจากไฟล์
FileWriter: ใช้สำหรับเขียนข้อมูลลงไฟล์
ฟังก์ชั่นที่เกี่ยวข้อง:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //ค้นหาไฟล์ที่ลากและวาง var fr = new FileReader(); //สร้างโปรแกรมอ่านไฟล์ fr.readAsURLData(f); //อ่านเนื้อหาไฟล์ fr.onload = function(){ //อ่านเสร็จแล้ว img.src = fr.result; //ใช้ข้อมูลที่อ่าน} }รหัสมีดังนี้:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { เส้นขอบ: 1px solid #aaa; รัศมีเส้นขอบ: 3px; ระยะขอบ: 10px; </style> </head> <body> <h1>ความรู้เพิ่มเติมเกี่ยวกับการลากและวาง API</h1> <h3>โปรดลากรูปภาพของคุณไปยังพื้นที่กล่องด้านล่าง</h3> <div id=container></ div > <script> //ฟังเหตุการณ์ดรอปของเอกสาร - ยกเลิกพฤติกรรมเริ่มต้น: เปิดรูปภาพในหน้าต่างใหม่ document.ondragover = function(e){ e.preventDefault(); //เปิดใช้งานเหตุการณ์ดรอปที่จะถูกทริกเกอร์ } document.ondrop = function(e){ e.preventDefault(); // ป้องกันไม่ให้รูปภาพเปิดในหน้าต่างใหม่ ไม่เช่นนั้นการดาวน์โหลดจะยังคงดำเนินต่อไป! - - } //ฟังเหตุการณ์ drop ของ div#container ลองอ่านข้อมูลรูปภาพที่ปล่อยออกมา และแสดงข้อมูลดังกล่าว .log ('ไคลเอนต์ลากรูปภาพแล้วปล่อย...') //วัตถุเป้าหมายปัจจุบันอ่านข้อมูลที่เก็บไว้ในวัตถุต้นทางลากและวาง //console.log(e.dataTransfer); //แสดงปัญหา //console.log(e.dataTransfer.files.length); //จำนวนรูปภาพที่ลากใน var f0 = e.dataTransfer.files[0]; //console.log(f0); /ไฟล์วัตถุไฟล์ //อ่านข้อมูลจากไฟล์วัตถุ var fr = new FileReader(); //fr.readAsText(f0); //อ่านสตริงข้อความจากไฟล์ fr.readAsDataURL(f0); //อ่านข้อมูล URL จากไฟล์ fr.onload = function(){ console.log('กำลังอ่านไฟล์เสร็จสมบูรณ์') console.log(fr.result); var img = new Image(); ; //URL ข้อมูล container.appendChild(img);เอฟเฟกต์มีดังนี้:
สรุปข้างต้นเป็นคำอธิบายโดยละเอียดของตัวอย่างคลาสสิกของ HTML5 แบบลากและวาง API ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!