React-Beautiful-DND : วิธีใช้งาน Library ลากวาง สำหรับ React Developer

บทความนี้ขอเสนอ Library น่าใช้ สำหรับนักพัฒนาที่ต้องการใช้งาน Drag and Drop ฟังก์ชั่น แต่ก่อนอื่น ไปทำความรู้จัก Drag and Drop (DND) ก่อนว่ามันคืออะไร?


Drag and Drop

ฟีเจอร์นี้เป็นคุณสมบัติของ HTML's APIs ที่อนุญาติให้คุณสามารถลากวาง HTML Element ได้ ส่วนใหญ่มักนำไปใช้ในโปรดักส์ เช่น Todo List หรืองานที่ต้องการให้ User เข้าใจการทำงานง่ายๆอย่าง การลากไฟล์ไป-มา ระหว่าง Folder

ทีนี้เมื่อต้องการใช้งานกับ React มี Library หลายตัว ที่เป็นที่นิยม ผมขอเสนอหนึ่งตัวเด็ดๆ นั่นคือ..

React-Beautiful-DND

ผู้พัฒนา Library เราน่าจะรู้จักกันเป็นอย่างดี คือ Atlassian หรือเราอาจคุ้นหูกับโปรดักส์ JIRA มากกว่า

ข้อดี

  • มี Documant ให้อ่านเยอะ เข้าใจง่าย
  • มีฟีเจอร์สำคัญๆให้ใช้งาน และปรับแต่งได้เยอะ
  • CSS พื้นฐานที่มีมาให้ค่อนข้างดูดี
  • รองรับการใช้งานบนหลากหลายอุปกรณ์
  • ใช้งานได้ฟรี เป็น Apache Licence V2


ข้อสังเกตุ

  • เนื่องจากไม่ใช่ผู้พัฒนาอิสระ ต้อง Focus กับงานอื่นๆก่อน Library จึงไม่ได้มีการอัพเดทเป็นเวลานาน ทำให้มีความเสี่ยงหากมีบัค แต่ผู้พัฒนาแจ้งว่า หากเป็นบัคร้ายแรง ก็จะมาอัพเดทให้

การใช้งานเบื้องต้น สามารถไปอ่านต่อได้ไม่ยาก มี ตัวอย่างการใช้งาน ให้ลองเล่นด้วยครับ

สำหรับบทความนี้ขอลาไปก่อย สวัสดี...

Popular posts from this blog

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?

รีวิว Dentiste Mastic Mint Bomb เม็ดอมที่ไม่ได้มีดีแค่ความสดชื่น

ไขรหัสนาซี Enigma แบบง่ายๆ สไตล์เอนจิเนียร์อินดี้ (The Imitation Game)

รีวิว THE DIVINE MOVE หมากพระเจ้า สั่งเป็นสั่งตาย แฟนหมากล้อมไม่ควรพลาดด้วยประการทั้งปวง

รวม Sticker Line น่ารัก น่าสะสม ยอดฮิต ตอนที่ 1