วิธีการทำ Drag to Swap หรือ การลากและวางใน React และ Next.js ด้วย Swapy
06 Mar 2025 04:002 months ago
เมื่อการออกแบบ UI กลายเป็นเรื่องง่ายด้วย Drag to Swap
เคยรู้สึกไหมว่าการจัดเรียงข้อมูลหรือองค์ประกอบบนเว็บไซต์และแอปพลิเคชันเป็นเรื่องยุ่งยาก? วันนี้เราจะมาพาคุณสำรวจเทคนิคสุดล้ำที่จะเปลี่ยนวิธีคิดในการออกแบบอินเตอร์เฟซของคุณ - นั่นก็คือ "Drag to Swap"
เทคนิคนี้ไม่เพียงแต่ทำให้การใช้งานง่ายขึ้น แต่ยังเพิ่มประสบการณ์ผู้ใช้งาน ช่วยเพิ่ม interaction มากขึ้น ด้วยวันนี้เราจะมาแนะนำ dependency ตัวหนึ่งนั้นก็คือ Swapy สามารถใช้ได้ทั้ง
- React
- Vue
- Svelte
โดยในวันนี้จะมาแสดงวิธีการง่ายๆ สำหรับการทำ Drag to Swap บน React (Next.js) กันครับ
อ่านเพิ่มเติมได้ที่ https://swapy.tahazsh.com/docs/installation/
ขั้นตอนที่ 1: Install Swapy เข้า Project ของเรา
ขั้นตอนที่ 2: Import Dependencies ในไฟล์ที่เราต้องการใช้งาน
ขั้นตอนที่ 3: ประกาศตัวแปร useRef สำหรับ container และ ตัวเก็บค่า state
ขั้นตอนที่ 4: สร้าง swapy instance ใน useEffect
ขั้นตอนที่ 5: return div container, slot และ item ด้วย slot คือ data-swapy-slot และ item คือ data-swapy-item
code เต็ม
และยังมีอีกวิธีสำหรับคนที่ต้องการความ dynamic ให้เนื้อหาภายในมีการ update ตลอดเวลา