ใช้เวลา 5 นาทีในการคิดหาการลากและวางของ html5 รวมถึงลำดับของเหตุการณ์การตรวจสอบและการดำเนินการอื่นๆ
ความหมายและการใช้งานเหตุการณ์ต่อไปนี้จะถูกทริกเกอร์ในระหว่างกระบวนการลากและวาง:
ทริกเกอร์เหตุการณ์บนเป้าหมายการลาก (องค์ประกอบต้นทาง):
เหตุการณ์ที่เกิดขึ้นเมื่อปล่อยเป้าหมาย:
Internet Explorer 9+, Firefox, Opera, Chrome และ Safari รองรับการลาก
หมายเหตุ: Safari 5.1.2 ไม่รองรับการลาก เมื่อลากองค์ประกอบ เหตุการณ์ ondragover จะถูกทริกเกอร์ทุกๆ 350 มิลลิวินาที
ตัวอย่างมีดังนี้:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>ลากและวางตัวอย่างที่กระชับ 5 นาที</title> <style> #draggable { width: 200px height: 20px; text-align: center; } .dropzone { ความกว้าง: 200px; .addEventListener (dragstart, ฟังก์ชั่น (เหตุการณ์) { console.log ('==========dragstart เริ่มถูกลาก==========การลากจะดำเนินการเพียงครั้งเดียว'); // บันทึกการอ้างอิงขององค์ประกอบที่ลาก (อ้างอิง) ลาก = event.target; // ทำให้โปร่งแสง event.target style.opacity = .5; }, false); /* เหตุการณ์การลากจะเกิดขึ้นเมื่อมีการลากองค์ประกอบเป้าหมาย*/ document.addEventListener(drag, function (event) { // console.log('==========drag=========Drag จะตรวจสอบต่อไปจนกว่าองค์ประกอบจะหายไป'); }, false); /* เมื่อวางเป้าหมาย องค์ประกอบเหตุการณ์ทริกเกอร์ */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== จะฟังเสมอเมื่อลาก จนกว่าองค์ประกอบจะถูกดร็อป'); // ป้องกันการดำเนินการเริ่มต้นเพื่อเปิดใช้งาน drop event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter ลากองค์ประกอบเข้าไปในองค์ประกอบเป้าหมาย========== สอดคล้อง เพื่อลาก '); // เน้นโหนดเป้าหมายเมื่อองค์ประกอบที่ลากได้เข้าสู่ดรอปโซน if (event.target.className == dropzone) { event.target.style.Background = purple; document.addEventListener(dragleave, function (event) { console.log('==========dragleave ลากองค์ประกอบออกจากองค์ประกอบเป้าหมาย==========สอดคล้องกับ Dragenter') ; // เมื่อองค์ประกอบที่ลากออกจากโหนดเป้าหมายที่ดร็อปได้ ให้รีเซ็ตพื้นหลังถ้า (event.target.className == dropzone) { event.target.style.Background = ; document.addEventListener(drop, function (เหตุการณ์ ) { console.log('==========drop drop element========== การลากจะดำเนินการเพียงครั้งเดียว ถูกทริกเกอร์ก่อน Dragenter'); // ป้องกันการกระทำเริ่มต้น (เช่น การเปิดลิงก์ไปยังองค์ประกอบบางส่วน) event.preventDefault(); // ย้ายองค์ประกอบที่ถูกลากไปยังโหนดดรอปโซนที่เลือก ถ้า (event.target.className == dropzone) { event.target.style.Background = ; Dragged.parentNode .removeChild (ลาก); event.target.appendChild(dagged); } }, false); document.addEventListener(dragend, function (event) { console.log('==========dragend สิ้นสุดการลาก====== =====การลากจะดำเนินการเพียงครั้งเดียว'); //รีเซ็ตความโปร่งใส event.target.style.opacity = ; </script></head><body> <div class=dropzone> < div id=ลากได้ Draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> นี่คือ DIV ที่สามารถลากได้ </div> </div> <div class=dropzone></div> <div class= ดรอปโซน ></div> <div class=dropzone></div></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network