การลากและวางเป็นคุณสมบัติทั่วไปนั่นคือลากไปยังตำแหน่งอื่นหลังจากวัตถุจับภาพใน HTML5 การลากและวางเป็นส่วนมาตรฐานของมาตรฐาน ใน HTML5 ผู้ใช้สามารถใช้เมาส์เพื่อเลือกองค์ประกอบการลากลากองค์ประกอบไปยังองค์ประกอบที่วางได้และวางปุ่มเมาส์ลงในองค์ประกอบเหล่านี้ ในระหว่างการดำเนินการลากกึ่งโปร่งใสที่ระบุว่าตัวชี้เมาส์สามารถลากได้
หากเราหวังว่าองค์ประกอบจะถูกลากได้เราจำเป็นต้องตั้งค่าคุณสมบัติ draggable เป็นจริง (แท็ก draggable เริ่มต้นเป็นจริง))
เหตุการณ์ลากและวางมีหลายเหตุการณ์ที่จะถูกเรียกใช้ในขั้นตอนต่าง ๆ ของการทำงานแบบลากและดรอปและแอตทริบิวต์ DataTransfer ของเหตุการณ์การลากและการลากจะต้องจัดเก็บข้อมูลที่เกี่ยวข้องในการทำงานแบบลากและดร็อป
| Dragstart | ใช้งานสำหรับ [องค์ประกอบแหล่งที่มา] เมื่อองค์ประกอบเริ่มถูกลากองค์ประกอบที่ผู้ใช้ลากต้องการเหตุการณ์ DragStart เพิ่มเติม ในเหตุการณ์นี้ผู้ฟังจะตั้งค่าข้อมูลที่เกี่ยวข้องกับการลากนี้เช่นการลากข้อมูลและรูปภาพ |
| เครื่องราง | ใช้งานได้สำหรับ [องค์ประกอบแหล่งที่มา] ทริกเกอร์เมื่อเมาส์ในการลากลงในองค์ประกอบ ผู้ฟังเหตุการณ์นี้จำเป็นต้องระบุว่าเมาส์ได้รับอนุญาตให้ปล่อยตัวในพื้นที่นี้หรือไม่ หากผู้ฟังไม่ได้ตั้งค่าหรือไม่ได้ใช้งานผู้ฟังจะไม่ได้รับอนุญาตให้เผยแพร่โดยค่าเริ่มต้น |
| การลาก | ใช้งานอยู่ใน [องค์ประกอบเป้าหมาย] ทริกเกอร์เมื่อเมาส์เคลื่อนย้ายโดยการลาก |
| ลาก | ใช้งานอยู่ใน [องค์ประกอบเป้าหมาย] ทริกเกอร์เมื่อเมาส์ออกจากองค์ประกอบในการลาก สามารถใช้เป็นไฮไลต์หรือเครื่องหมายแทรกที่สามารถปล่อยออกมาได้ |
| ลาก | ใช้งานสำหรับ [องค์ประกอบแหล่งที่มา] เหตุการณ์จะถูกทริกเกอร์เมื่อมีการลากองค์ประกอบ |
| หยด | เปิดใช้งานสำหรับ [องค์ประกอบเป้าหมาย] ทริกเกอร์ในองค์ประกอบการเปิดตัวเมื่อการเปิดตัวของการทำงานของการลาก |
| การลาก | ใช้งานสำหรับ [องค์ประกอบแหล่งที่มา] แหล่งที่มาของการลากจะถูกกระตุ้นเมื่อสิ้นสุดการดำเนินการลากโดยไม่คำนึงว่าการดำเนินการสำเร็จหรือไม่ |
(เมื่อลากมันจะกระตุ้นเหตุการณ์ที่เกี่ยวข้องกับการลากเหตุการณ์เมาส์เช่น Mousemove ซึ่งจะไม่ถูกกระตุ้น)
วัตถุ DataTransferเมื่อประมวลผลการทำงานแบบลากและดร็อปเราจำเป็นต้องใช้วัตถุ DataTransfer เพื่อบันทึกข้อมูลที่ลาก DataTransfer สามารถบันทึกข้อมูลอย่างน้อยหนึ่งข้อมูลประเภทข้อมูลอย่างน้อยหนึ่งชนิด
คุณสมบัติ
| Dropeffect | Dropeffect [String] ระบุเอฟเฟกต์การจัดวางจริงค่าที่เป็นไปได้: คัดลอก: คัดลอกไปยังตำแหน่งใหม่ ย้าย: ย้ายไปยังตำแหน่งใหม่ ลิงค์: สร้างลิงก์จากแหล่งกำเนิดไปยังตำแหน่งใหม่ ไม่มี: ต้องห้ามที่จะวาง (ไม่มีการดำเนินการ) |
| เอฟเฟกต์ | [สตริง] ระบุเอฟเฟกต์ที่อนุญาตเมื่อลากค่าที่เป็นไปได้: คัดลอก: คัดลอกไปยังตำแหน่งใหม่ ย้าย: ย้ายไปยังตำแหน่งใหม่ ลิงค์: สร้างลิงก์จากแหล่งกำเนิดไปยังตำแหน่งใหม่ Copylink: อนุญาตให้คัดลอกหรือลิงก์ CopyMove: อนุญาตให้คัดลอกหรือย้าย LinkMove: อนุญาตลิงก์หรือย้าย ทั้งหมด: อนุญาตให้ดำเนินการทั้งหมด ไม่มี: ต้องห้ามการดำเนินงานทั้งหมด Uninitialized: ค่าเริ่มต้น (ค่าเริ่มต้น) เทียบเท่ากับทั้งหมด |
| ไฟล์ | มีรายการไฟล์ท้องถิ่นที่มีอยู่ในการส่งข้อมูล หากการทำงานแบบลากไม่เกี่ยวข้องกับไฟล์ลากแอตทริบิวต์นี้เป็นรายการที่ว่างเปล่า |
| ประเภท | บันทึกรายการประเภทข้อมูลการจัดเก็บเป็นรายการแรกคำสั่งซื้อสอดคล้องกับลำดับการเพิ่มข้อมูล หากไม่มีการเพิ่มข้อมูลรายการว่างจะถูกส่งคืน |
วิธี
| เป็นโมฆะ addElement (องค์ประกอบองค์ประกอบ) | ตั้งค่าแหล่งลาก โดยปกติจะไม่จำเป็นต้องเปลี่ยนสิ่งนี้ เป้าหมายเริ่มต้นคือการลากโหนด |
| โมฆะ Cleardata (ประเภทสตริง) | ลบข้อมูลที่เกี่ยวข้องกับประเภทที่กำหนด ประเภทพารามิเตอร์เป็นทางเลือก หากประเภทนั้นว่างเปล่าหรือไม่ได้ระบุให้ลบข้อมูลที่เกี่ยวข้องทุกประเภท หากไม่มีประเภทของข้อมูลหรือการส่งข้อมูลไม่มีข้อมูลใด ๆ วิธีนี้จะไม่มีผล |
| สตริง getData (ประเภทสตริง) | การได้รับข้อมูลประเภทที่กำหนดหากข้อมูลของประเภทที่กำหนดไม่มีอยู่หรือข้อมูลถูกเก็บไว้โดยไม่ต้องมีข้อมูลวิธีการจะส่งคืนสตริงเปล่า |
| เป็นโมฆะ setData (ประเภทสตริงข้อมูลสตริง) | ตั้งค่าข้อมูลสำหรับประเภทที่กำหนด หากชนิดข้อมูลไม่มีอยู่จะมีการเพิ่มไปยังจุดสิ้นสุดและโครงการสุดท้ายในรายการประเภทนี้จะเป็นรูปแบบใหม่ หากคุณมีอยู่แล้วให้แทนที่ข้อมูลที่มีอยู่ในตำแหน่งเดียวกัน นั่นคือเมื่อมีการแทนที่ข้อมูลประเภทเดียวกันลำดับของรายการประเภทจะไม่เปลี่ยนแปลง |
| เป็นโมฆะ setDragimage (ภาพ domelement, ยาว x, ยาว y) | ปรับแต่งรูปภาพของการลากที่คาดหวัง ในกรณีส่วนใหญ่รายการนี้ไม่จำเป็นต้องตั้งค่าเนื่องจากโหนดที่ลากถูกสร้างขึ้นเป็นภาพเริ่มต้น ควรใช้รูปภาพเป็นองค์ประกอบภาพข้อเสนอแนะการลาก การกระจัดในแนวนอนในภาพ X ออฟเซ็ตแนวตั้งในรูปปั้น y |
การสนับสนุนเบราว์เซอร์
Internet Explorer 9+, Firefox, Opera 12, Chrome และ Safari 5+
รหัสสาธิต
<! ความสูง: 100px; Solid #CCCCFF; > </div> <div class = bin> & nbsp; ' E.DatraNsfer.Effectlowed = 'Move'; จริง; องค์ประกอบลากเข้าสู่องค์ประกอบเป้าหมาย bin.ondragover = ฟังก์ชั่น (e) {E.preentDefault (); 'กลับมาจริง; ฟังก์ชั่น (e) {if (drag) {drag.parentNode.RemoveChild (Drag); ฟังก์ชั่น (e) {e.preventdefault ();ข้างต้นคือการแนะนำข้อมูลที่เกี่ยวข้องกับการลากและลดลงใน HTML5