HTML ลากและวางบนอุปกรณ์มือถือ

เมื่อคุณเพิ่มการลากและวางลงในหน้าเว็บโดยใช้ JavaScript เช่น jQuery UI ที่ลากได้และลากเลื่อนได้คุณจะทำให้สิ่งนี้ทำงานได้อย่างไรเมื่อดูผ่านเบราว์เซอร์บนอุปกรณ์มือถือซึ่งการกระทำบนหน้าจอสัมผัสสำหรับการลากจะถูกขัดขวางโดย โทรศัพท์สำหรับเลื่อนไปรอบ ๆ หน้า ฯลฯ ?

ยินดีต้อนรับโซลูชันทั้งหมด ... ความคิดเริ่มต้นของฉันคือ:

1. มีปุ่มสำหรับอุปกรณ์เคลื่อนที่ที่ "ยก" รายการที่จะลากจากนั้นให้พวกเขาคลิกโซนที่ต้องการวางรายการนั้น

2. เขียนแอปที่ทำสิ่งนี้สำหรับอุปกรณ์มือถือแทนที่จะพยายามทำให้หน้าเว็บทำงานได้!

3. ข้อเสนอแนะและความคิดเห็นของคุณโปรด

jQuery UI Touch Punch แก้ปัญหาได้ทั้งหมด

เป็น Touch Event Support สำหรับ jQuery UI โดยพื้นฐานแล้วมันเพียงแค่เชื่อมต่อเหตุการณ์สัมผัสกลับไปที่ jQuery UI ทดสอบบน iPad, iPhone, Android และอุปกรณ์มือถือระบบสัมผัสอื่น ๆ ฉันใช้ jQuery UI ที่เรียงลำดับได้และมันใช้งานได้อย่างมีเสน่ห์

http://touchpunch.furf.com/

มีโพลีฟิลใหม่สำหรับแปลเหตุการณ์การสัมผัสเป็นลากแล้วปล่อยดังนั้น HTML5 Drag And Drop จึงใช้งานได้บนมือถือ

โพลีฟิลล์ได้รับการแนะนำโดย Bernardo Castilho ในโพสต์นี้

นี่คือตัวอย่างจากโพสต์นั้น

โพสต์ยังนำเสนอข้อควรพิจารณาหลายประการเกี่ยวกับการออกแบบ Folyfill

ฉันต้องการสร้างการหมุนแบบลากแล้วปล่อย + ที่ใช้งานได้บนเดสก์ท็อปมือถือแท็บเล็ตรวมถึง Windows Phone อันสุดท้ายทำให้ซับซ้อนมากขึ้น (mspointer กับ touch events)

การแก้ปัญหามาจากห้องสมุด Greensockอันยิ่งใหญ่

ต้องใช้เวลาในการกระโดดผ่านห่วงเพื่อให้วัตถุเดียวกันลากและหมุนได้ แต่ทำงานได้อย่างสมบูรณ์

Sencha Touchรุ่นเบต้ามีการรองรับการลากและวาง

คุณสามารถอ้างถึงตัวอย่าง DnDของพวกเขาตัวอย่างสิ่งนี้ใช้ได้เฉพาะกับเบราว์เซอร์ webkit เท่านั้น

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

อัปเดต:ลิงก์ตัวอย่างเดิมไม่ทำงาน แต่ฉันพบทางเลือกนี้:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

คุณอาจลองใช้โพลีฟิลลาก n-drop ของ Tim Ruffleซึ่งคล้ายกับของBernardo Castilho (ดูคำตอบของ @remdevtec)

เพียงแค่ทำnpm install mobile-drag-drop --save(มีวิธีการติดตั้งอื่น ๆ เช่นใช้โบเวอร์)

จากนั้นอินเทอร์เฟซองค์ประกอบใด ๆ ที่อาศัยการตรวจจับการสัมผัสควรทำงานบนอุปกรณ์เคลื่อนที่ (เช่นลากเฉพาะองค์ประกอบแทนที่จะเลื่อน + ลากในเวลาเดียวกัน)

นี่คือทางออกของฉัน:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Jquery Touch Punch นั้นยอดเยี่ยม แต่สิ่งที่ทำได้คือปิดการใช้งานการควบคุมทั้งหมดบน div ที่ลากได้ดังนั้นเพื่อป้องกันไม่ให้คุณต้องแก้ไขบรรทัด ... (ในขณะที่เขียน - บรรทัดที่ 75)

เปลี่ยนแปลง

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

อ่าน

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

เพิ่มหรือมากเท่าที่คุณต้องการสำหรับแต่ละองค์ประกอบที่คุณต้องการ 'ปลดล็อก'

หวังว่าจะช่วยใครบางคน

ห้องสมุดจัดเรียง JSเข้ากันได้กับหน้าจอแบบสัมผัสและไม่ต้องใช้ jQuery

วิธีจัดการกับหน้าจอสัมผัสที่คุณต้องสัมผัสหน้าจอประมาณ 1 วินาทีเพื่อเริ่มลากรายการ

นอกจากนี้ยังนำเสนอการทดสอบวิดีโอที่แสดงว่าไลบรารีนี้ทำงานได้เร็วกว่า JQuery UI Sortable

สำหรับ vue 3 มีhttps://github.com/SortableJS/vue.draggable.next

สำหรับ vue 2 มันคือ https://github.com/SortableJS/Vue.Draggable

หลังคุณสามารถใช้ดังนี้:

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

โดยอ้างอิงจาก sortable.js