ฟังก์ชันลากและวางของ H5 ถูกนำมาใช้ในการพัฒนาโปรเจ็กต์ล่าสุด เนื่องจากโปรเจ็กต์ที่มีอยู่ใช้บัคเก็ตตระกูล VUE จึงมีการใช้ปลั๊กอิน vuedragable แต่กระบวนการทั้งหมดค่อนข้างเจ็บปวด ดังนั้นฉันจึงตัดสินใจเริ่มศึกษาหลักการของการลากและวาง H5 แล้วนำไปใช้กับเฟรมเวิร์กที่ขับเคลื่อนด้วยข้อมูล ในการใช้งานการลากและวางใน H5 ต้องมีอย่างน้อยสองขั้นตอน: 1) ตั้งค่าแอตทริบิวต์ที่ลากได้ขององค์ประกอบออบเจ็กต์ที่คุณต้องการลากและวางเป็นจริง (img และองค์ประกอบอนุญาตให้ลากและวางตามค่าเริ่มต้น) 2) การเขียน และการลากโค้ดการจัดการเหตุการณ์ที่เกี่ยวข้อง เพื่อความสะดวกในการทดสอบ ก่อนอื่นฉันใช้ไลบรารี jQuery เพื่อทำหน้าที่ลากและวางพื้นฐานให้สมบูรณ์
1. ลากและวางกระบวนการ 1.1 เหตุการณ์ลากเมื่อลากองค์ประกอบที่ลากได้ในขณะที่กดเมาส์ค้างไว้ องค์ประกอบนั้นจะถูกเรียกใช้ตามลำดับต่อไปนี้:
Dragstart -> ลาก -> Dragend
เมื่อองค์ประกอบที่ลากได้ถูกลากเข้าไปในคอนเทนเนอร์ องค์ประกอบนั้นจะถูกทริกเกอร์ตามลำดับต่อไปนี้:
Dragenter -> Dragover -> ดรอป
Dragenter: ตราบใดที่องค์ประกอบถูกลากไปยังเป้าหมายการวาง เหตุการณ์ Dragenter จะถูกทริกเกอร์
Dragover: Dragover จะตามมาด้วยเหตุการณ์ Dragover และเหตุการณ์นี้จะยังคงถูกทริกเกอร์ต่อไปในขณะที่องค์ประกอบที่ถูกลากยังคงเคลื่อนไหวภายในระยะของเป้าหมายการวาง
Dragleave: เมื่อองค์ประกอบถูกลากออกจากเป้าหมายตำแหน่ง Dragleave จะถูกทริกเกอร์
drop: เริ่มทำงานเมื่อมีการวางองค์ประกอบที่ลากไว้บนองค์ประกอบเป้าหมาย
1.3 โฟลว์เหตุการณ์เสร็จสมบูรณ์ตั้งแต่เริ่มลากองค์ประกอบไปจนถึงการวางองค์ประกอบลงในพื้นที่เป้าหมาย องค์ประกอบจะถูกทริกเกอร์ตามลำดับต่อไปนี้:
Dragstart->ลาก->dragenter->dragover->dragleave->drop->dragend
2. แก้ไขปัญหาที่ Firefox ไม่รองรับการลากและวางหากเราเพิ่มแอตทริบิวต์ที่ลากได้ลงในองค์ประกอบโดยตรง ก็สามารถลากได้โดยตรงใน Chrome และ Opera (ไม่มีการดำเนินการเผยแพร่ (เช่น ลูกศรเปลี่ยนเป็นเครื่องหมาย +)) แต่ไม่มีการตอบกลับใน Firefox
<ul class=canDrog> <li Draggable=true id=1>ยอดเยี่ยม</li> <li Draggable=true id=2>ดี</li> <li Draggable=true id=3>ปานกลาง</li> <li Draggable=true id=4>แย่</li> </ul> <script> //ไม่มีรหัส JS</script>
ในการแก้ปัญหานี้ คุณต้องผูกตัวจัดการเหตุการณ์ลากสตาร์ทเข้ากับองค์ประกอบการลาก และเรียกใช้ฟังก์ชันevent.dataTransfer.setDataในฟังก์ชันนี้
<script> <ul class=canDrog> <li Draggable=true id=1>ยอดเยี่ยม</li> <li Draggable=true id=2>ดี</li> <li Draggable=true id=3>ปานกลาง</li > <li Draggable=true id=4>ความแตกต่าง</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox ต้องเข้าถึงวัตถุ dataTransfer ที่ใช้สำหรับลากและวางการสื่อสาร event.dataTransfer.setData(Text,'1'); });</script> 3. แก้ไขปัญหาที่เครื่องหมายปล่อยไม่แสดงเมื่อลากองค์ประกอบลงในคอนเทนเนอร์ใน Chrome และ Operaโลโก้ที่เผยแพร่ได้อาจแตกต่างกันไปขึ้นอยู่กับระบบปฏิบัติการ ใน Mac Chrome จะปรากฏเป็นโลโก้วงกลมที่มีเครื่องหมาย '+' สีขาวฝังอยู่
วิธีแก้ไขคือการผูกเหตุการณ์ Dragover เข้ากับคอนเทนเนอร์
<ul class=canDrog> <li Draggable=true id=1>ยอดเยี่ยม</li> <li Draggable=true id=2>ดี</li> <li Draggable=true id=3>ปานกลาง</li> <li Draggable=true id=4>ความแตกต่าง</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>ส่วน/สัปดาห์</th> <th>วันจันทร์</th> <th>วันอังคาร</th> <th>วันพุธ</th> <th>วันพฤหัสบดี</th> <th>วันศุกร์</th> </tr> </thead> <tbody > <tr> <td>ส่วนที่ 1</td> <td Draggable=true ></td> <td Draggable=true ></td> <td Draggable=true ></td> <td Draggable= True >< /td> <td Draggable=true ></td> </tr> <!--ละไว้ที่นี่--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event.dataTransfer.setData(Text,'1'); }); //google Chrome และ opera จำเป็นต้องเพิ่ม $(.dataTbl).bind(dragover,'td',function(e){ e.OriginalEvent.preventDefault(); }) </script> 4. แก้ปัญหา firefox เปิด tab ใหม่ตอนวางหากคุณปล่อยองค์ประกอบที่ลากเมื่อใช้ Firefox เบราว์เซอร์เริ่มต้นจะเปิดแท็บใหม่ดังนี้
เนื่องจากเบราว์เซอร์ดำเนินการพฤติกรรมเริ่มต้นหลังจากฟังก์ชัน drop callback วิธีแก้ไขตามปกติคือการเพิ่มโค้ดที่ป้องกันการดำเนินการของเหตุการณ์เริ่มต้นและป้องกันการเดือดพล่านใน drop hook ของคอนเทนเนอร์การลาก
<script> //ปล่อยองค์ประกอบลงในองค์ประกอบปัจจุบัน $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation(); });</script>อย่างไรก็ตาม หากองค์ประกอบที่ลากได้ถูกลากไปยังที่อื่น ปัญหาในการเปิดแท็บใหม่จะยังคงเกิดขึ้น ในกรณีนี้ คุณสามารถเพิ่มโค้ดข้างต้นลงในคอนเทนเนอร์ทั้งหมดได้
5. เขียนตัวอย่างเล็กๆ น้อยๆ ที่สมบูรณ์ซอร์สโค้ด: https://github.com/pluslicy/drag
ต่อมา เราจะศึกษาไลบรารีปลั๊กอิน vuedraggable และนำไปใช้ในเฟรมเวิร์ก vue
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network