คำอธิบายโดยละเอียดของการลากและวางแบบเนทิฟ Html5

ฟังก์ชันลากและวางของ H5 ถูกนำมาใช้ในการพัฒนาโปรเจ็กต์ล่าสุด เนื่องจากโปรเจ็กต์ที่มีอยู่ใช้บัคเก็ตตระกูล VUE จึงมีการใช้ปลั๊กอิน vuedragable แต่กระบวนการทั้งหมดค่อนข้างเจ็บปวด ดังนั้นฉันจึงตัดสินใจเริ่มศึกษาหลักการของการลากและวาง H5 แล้วนำไปใช้กับเฟรมเวิร์กที่ขับเคลื่อนด้วยข้อมูล ในการใช้งานการลากและวางใน H5 ต้องมีอย่างน้อยสองขั้นตอน: 1) ตั้งค่าแอตทริบิวต์ที่ลากได้ขององค์ประกอบออบเจ็กต์ที่คุณต้องการลากและวางเป็นจริง (img และองค์ประกอบอนุญาตให้ลากและวางตามค่าเริ่มต้น) 2) การเขียน และการลากโค้ดการจัดการเหตุการณ์ที่เกี่ยวข้อง เพื่อความสะดวกในการทดสอบ ก่อนอื่นฉันใช้ไลบรารี jQuery เพื่อทำหน้าที่ลากและวางพื้นฐานให้สมบูรณ์

เมื่อลากองค์ประกอบที่ลากได้ในขณะที่กดเมาส์ค้างไว้ องค์ประกอบนั้นจะถูกเรียกใช้ตามลำดับต่อไปนี้:

Dragstart -> ลาก -> Dragend

1. Dragstart: ทริกเกอร์เมื่อกดเมาส์และเริ่มลาก (ทริกเกอร์หนึ่งครั้ง)
2. ลาก: ทริกเกอร์ขณะกดเมาส์ค้างไว้แล้วลาก (ทริกเกอร์อย่างต่อเนื่อง)
3. Dragend: ทริกเกอร์หลังจากปล่อยเมาส์ (ไม่ว่าองค์ประกอบจะถูกวางบนเป้าหมายตำแหน่งที่ถูกต้องหรือเป้าหมายตำแหน่งที่ไม่ถูกต้อง)

เมื่อองค์ประกอบที่ลากได้ถูกลากเข้าไปในคอนเทนเนอร์ องค์ประกอบนั้นจะถูกทริกเกอร์ตามลำดับต่อไปนี้:

Dragenter -> Dragover -> ดรอป

Dragenter: ตราบใดที่องค์ประกอบถูกลากไปยังเป้าหมายการวาง เหตุการณ์ Dragenter จะถูกทริกเกอร์

Dragover: Dragover จะตามมาด้วยเหตุการณ์ Dragover และเหตุการณ์นี้จะยังคงถูกทริกเกอร์ต่อไปในขณะที่องค์ประกอบที่ถูกลากยังคงเคลื่อนไหวภายในระยะของเป้าหมายการวาง

Dragleave: เมื่อองค์ประกอบถูกลากออกจากเป้าหมายตำแหน่ง Dragleave จะถูกทริกเกอร์

drop: เริ่มทำงานเมื่อมีการวางองค์ประกอบที่ลากไว้บนองค์ประกอบเป้าหมาย

ตั้งแต่เริ่มลากองค์ประกอบไปจนถึงการวางองค์ประกอบลงในพื้นที่เป้าหมาย องค์ประกอบจะถูกทริกเกอร์ตามลำดับต่อไปนี้:

Dragstart->ลาก->dragenter->dragover->dragleave->drop->dragend

หากเราเพิ่มแอตทริบิวต์ที่ลากได้ลงในองค์ประกอบโดยตรง ก็สามารถลากได้โดยตรงใน 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>

โลโก้ที่เผยแพร่ได้อาจแตกต่างกันไปขึ้นอยู่กับระบบปฏิบัติการ ใน 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>

หากคุณปล่อยองค์ประกอบที่ลากเมื่อใช้ Firefox เบราว์เซอร์เริ่มต้นจะเปิดแท็บใหม่ดังนี้

เนื่องจากเบราว์เซอร์ดำเนินการพฤติกรรมเริ่มต้นหลังจากฟังก์ชัน drop callback วิธีแก้ไขตามปกติคือการเพิ่มโค้ดที่ป้องกันการดำเนินการของเหตุการณ์เริ่มต้นและป้องกันการเดือดพล่านใน drop hook ของคอนเทนเนอร์การลาก

 <script> //ปล่อยองค์ประกอบลงในองค์ประกอบปัจจุบัน $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); event.stopPropagation(); });</script>

อย่างไรก็ตาม หากองค์ประกอบที่ลากได้ถูกลากไปยังที่อื่น ปัญหาในการเปิดแท็บใหม่จะยังคงเกิดขึ้น ในกรณีนี้ คุณสามารถเพิ่มโค้ดข้างต้นลงในคอนเทนเนอร์ทั้งหมดได้

ซอร์สโค้ด: https://github.com/pluslicy/drag

ต่อมา เราจะศึกษาไลบรารีปลั๊กอิน vuedraggable และนำไปใช้ในเฟรมเวิร์ก vue

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network