ลากและวางเป็นส่วนหนึ่งของมาตรฐาน HTML5
การสนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera 12, Chrome และ Safari 5 สนับสนุนการลากและวาง
องค์ประกอบลาก, dragelement:
1. เพิ่มเหตุการณ์: onDragStart 2. เพิ่มแอตทริบิวต์: Dragableองค์ประกอบวาง, dropelement:
1. เพิ่มเหตุการณ์: Ondargenter, OnDragover, OnDragleave, OnDragend, OnDrop
มันคล้ายกับเหตุการณ์ของ Mouser ในการจำแนกประเภทและเป็นที่เข้าใจกันดี
1. ลากและวางระหว่างองค์ประกอบบนหน้า
ลองใช้ตัวอย่างเล็ก ๆ ด้านล่างการลากและดร็อประหว่าง DIV จะปรากฏขึ้นกันว่าแต่ละเหตุการณ์จะถูกเรียกใช้อย่างไร:
<! src = ../../jQuery-1.8.3.js type = text/javaScript charset = utf-8> </script> <script type = text/javascript>/*** ลาก (ลากและวาง) คือ องค์ประกอบมาตรฐาน HTML5 * เบราว์เซอร์รองรับ* Internet Explorer 9, Firefox, Opera 12, Chrome และ Safari 5 สนับสนุนการลากและวาง * / $ (fuins () {$ (#dragele) [0] .ondragstart = ฟังก์ชั่น (เหตุการณ์) {console.log (drawstart); event.datatransfer.setData (text, event.target.id);}; /******************************* * * เมื่อมีการวางข้อมูลการลากเหตุการณ์การตกจะเกิดขึ้น p] + @@);} * / console.log (ondrop); ) .d (div) .length))); ;} $ (#dropele) [0] .ondragleave = ฟังก์ชั่น (เหตุการณ์) {console.log (ondrop lead); หัว> <body> <div style = border: 1px red red; : 330px;คุณต้องให้ความสนใจกับ:
A. OnTragover ต้องจัดระเบียบพฤติกรรมเริ่มต้นของเหตุการณ์
B. พฤติกรรมเริ่มต้นของเหตุการณ์ Drop ถูกเปิดในลิงค์ดังนั้นจึงจำเป็นต้องป้องกันพฤติกรรมเริ่มต้น
นอกจากนี้ยังเป็นไปได้ที่จะสังเกตเห็นว่าเมื่อลากและลดลงเหตุการณ์มีเหตุการณ์ datatransfer วัตถุ และคัดลอก
นี่คือวิธีการอื่น ๆ ของวัตถุ:
Event.DatAtransfer:
items = [Object DataTransferntemlist] @@ drag_drop.html: 44
files = [Object filelist] @@ drag_drop.html: 44
types = text/plain @@ drag_drop.html: 44
EffectAlowed = All @@ drag_drop.html: 44
dropeffect = none @@ drag_drop.html: 44
cleartata = ฟังก์ชั่น cleanata () {[รหัสดั้งเดิม]} @@ drag_drop.html: 44
getData = fuory getData () {[รหัสดั้งเดิม]} @@ drag_drop.html: 44
setData = ฟังก์ชั่น setData () {[รหัสดั้งเดิม]} @@ drag_drop.html: 44
setDragimage = ฟังก์ชั่น setDragimage () {[รหัสดั้งเดิม]} @@
ฉันใช้ JS เพื่อพิมพ์คุณลักษณะทั้งหมด:
1. GetData ตัวอย่างของ SetData ถูกนำมาใช้ในตัวอย่างข้างต้น ClearData คือการล้างข้อมูลการตั้งค่า
2. เป็นที่น่าสังเกตว่าไฟล์
3. SetDragimage (Image, X, Y) ใช้เพื่อตั้งค่าการเรนเดอร์ของการเคลื่อนที่ด้วยเมาส์ระหว่างการเคลื่อนไหวของเมาส์ ต้องตั้งค่าใน DragStart
4. ประเภทเอฟเฟกต์และ dropffect เป็นประเภทของการลากลงในองค์ประกอบ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้