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 จึงไม่ได้มีการอัพเดทเป็นเวลานาน ทำให้มีความเสี่ยงหากมีบัค แต่ผู้พัฒนาแจ้งว่า หากเป็นบัคร้ายแรง ก็จะมาอัพเดทให้

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

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

Comments

Post a Comment

Popular posts from this blog

วิธีตรวจสอบข้อมูลภาษีของตัวเอง รายได้ทั้งปี และค่าลดหย่อน จบครบที่เดียว

Image
แล้วก็มาถึงฤดูกาลแห่งการยื่นภาษีประจำปี สำหรับปี 2567 ยื่นได้ตั้งแต่วันนี้ จนถึงวันที่ 9 เม.ย. 2567  แม้ปีที่แล้วไม่ได้ทำอะไรมากมาย แต่รายได้ก็มีหลายช่องทาง ทั้งการเปลี่ยนงาน รับจ๊อบเสริม จากที่เมื่อก่อนจำไม่ได้ว่าตัวเองมีรายได้ตรงไหนบ้าง ไล่เช็คเมลจนตาลาย วันนี้กรมสรรพากร มีเมนูให้เราเช็คกันแล้ว (มีมานานแล้วหรือยังนะ) ก่อนอื่นเข้าไปที่ เว็บไซต์กรมสรรพากร เลือกเมนู ตรวจสอบข้อมูลทางภาษี เข้าสู่ระบบ แนะนำว่าให้ใช้ Digital ID เพราะจะสามารถดูข้อมูลรายได้ได้ด้วย ถ้าใช้ RD ID จะดูได้แค่ค่าลดหย่อน เมื่อเข้าสู่ระบบก็จะเห็นข้อมูลลดหย่อน และรายได้ที่มีการยื่นไปที่สรรพากร เท่านี้การยื่นภาษีในปีนี้ก็จะไม่ใช่เรื่องปวดหัวอีกต่อไป
Read more

วิธีสร้างแรงบันดาลใจ TED Talks คืออะไร ? และทำไมคุณควรต้องดู ?

Image
เป็นตอนสายของวันหยุด ที่อากาศเป็นใจต่อการนอนต่อ ไม่มีแสงแดดแรง ไม่มีนัด ไม่มีความคิดที่อยากตื่นขึ้นมาทำอะไรสักอย่าง เชื่อว่าหลายคนคงเคยมีอาการคล้ายแอดมิน อยากนอนให้รับรู้ความรู้สึกของการเป็นเจ้าหญิงเจ้าชายนิทราไปเลย เฮ้อออ ชีวิต !!! แอดมินคิดว่าหากเราไร้เป้าหมาย ไร้ความรู้สึกที่อยากจะทำอะไร สมองว่างเปล่า นั่นทำให้เราติดอยู่ในวงเวียนของการใช้ชีวิตแบบเดิมซ้ำๆซากๆ ยกตัวอย่าง หากวันเสาร์เราตื่น 11โมง อาบน้ำ กินข้าว ซักผ้า เล่นเนต เล่นเกม อ่านการ์ตูน ยาวไปถึงเย็น แล้วก็กินข้าว ดูหนังซักเรื่อง ซีรีย์ซักสองตอน หมดล่ะ 1 วัน และนี่คือสิ่งที่เราจะทำ หากเราไร้แรงบันดาลใจ ลองมาคิดดูว่าถ้าเราสามารถเพิ่มกิจกรรมใหม่ๆ ให้กับ 1 วันของเรา เช่น อ่านหนังสือ ออกกำลังกาย ออกไปถ่ายรูป ไปอบรมหรือเรียนสิ่งที่เราสนใจ เป็นต้น แน่นอนสิ่งที่เราจะทำ มันต้องมีเป้าหมาย ยกตัวอย่างการออกกำลังกาย ถ้าเราไม่มีเป้าหมายว่าหนึ่งวันเราจะต้องวิ่งให้ได้ 5 กิโลเมตร ซิตอัพให้ได้ 100 ครั้ง มันจะไม่มีความหมายเลย เพราะเราจะทำแค่ให้มันผ่านๆไปเท่านั้น และวันนึงเราก็จะเลิก ทีนี้เมื่อเราสร้างเป้าหมายขึ้นมาแล้ว อะไรคือแรงกระตุ้นท
Read more

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

Image
สวัสดีครับ หลายคนคงปิดเทอมกันอยู่ล่ะสิ แอดมินก็เหมือนกัน กิจกรรมที่น่าทำมากๆตอนปิดเทอม ก็ต้องดูหนังสิครับ ซี่รี่เอย การ์ตูนเอย จัดเต็มกันไปเลย แล้วท่านผู้อ่านเคยสงดูหนังฝรั่งไหมครับ เคยสงสัยไหมว่า Yes ,Yeah ,Yep ,Yup อะไรพวกนี้มันเหมือนกันไหม แตกต่างกันอย่างไร แอดมินก็สงสัยครับ .... จนในที่สุดก็ได้รับคำตอบว่า คำพวกนี้ความหมายเหมือนกันครับ คือแปลว่า "ใช่" ส่วนคำว่า Yeah (ออกเสียงว่า "เย") นั้นมาจากความขี้เกียจของฝรั่งที่ไม่อยากออกเสียง S แต่ก็มีอีกพวกที่ไม่อยากออกเสียง S พวกนี้ใช้ P แทน จึงกลายเป็น Yep หรือ Yup ครับ นอกจากนี้ยังมี Ya คำนี้ส่วนใหญ่จะเห็นในเพลงนะครับ ถามว่าเราควรใช้คำไหน แอดมินคิดว่าตามสะดวกแหละครับ แต่หากจะเป็นทางการหน่อย ก็ใช้ Yes ถ้า Yep ก็จะประมาณว่า "เออ" "อือ" อะไรทำนองนั้น ส่วน Yeah ก็จะเหมือนกับตอนที่เราต้องการพูดว่า "ใช่" แบบ "แมร่งใช่อ่ะ" คือมีอารมณ์ด้วย ลองดูคลิปด้านล่างเป็นตัวอย่างก็ได้ครับ ตอนนี้แอดมินกำลังฝึกภาษาอังกฤษต้อนรับ AEC  อยู่ครับแหะๆ วันนี้ก็เลยพูดเรื่องภาษาอังกฤษ
Read more

ฝากโค๊ด Online ด้วย Pastebin กันเถอะครับ !!

Image
วันนี้ผมจะมาแนะนำการใช้เครื่องมือ แชร์ไฟล์โปรแกรมมิ่งออนไลน์ เชื่่อว่าหลายคนที่เป็นโปรแกรมเมอร์ต้องมี   I ntegrated Development Environment (  IDE )  ในดวงใจกันแล้ว แต่หากเมื่อคุณต้องการส่งโค้ดให้เพื่อนหลายๆคน  อาจลำบากในการไปอัพโหลดไฟล์อีกหลายขั้นตอน  คุณลองมาใช้โปรแกรมนี้สิครับ Pastebin  เป็นเครื่องมือยอดนิยม ใช้ฝากโค๊ดออนไลน์ มีหลากหลายภาษา การใช้งานก็ง่าย สะดวก รวดเร็ว เหมาะสำหรับการแชร์โค๊ดไปยัง Social network ต่างๆ วิธีการใช้ก็ง่ายๆ 1.เขียนโค้ดหรือ Copy โค้ดของคุณมาวางครับ 2.เลือก Syntax หรือภาษาของโค้ดคุณ มีให้เลือกมากมายเลยทีเดียว (เยอะเวอร์) 3.เลือก ระยะเวลาในการลบโค้ดของคุณออกจากระบบ 4.เลือกความเป็นส่วนตัวของโค้ด Public คนทั่วไปสามารถมองเห็นได้  Unlisted คนทั่วไปไม่สามารถมองเห็นได้ Private (members only) มองเห็นได้เฉพาะสมาชิก (ต้องลงทะเบียนก่อน) 5.ตั้งชื่อไฟล์ครับ 6.กดยืนยัน หลังจากกดยืนยันจะได้โค้ดในรูปแบบของภาษาที่คุณเลือก อ่านเข้าใจง่าย สุดท้าย Copy URL เพื่อส่ง Link ให้เพื่อนครับ ง่ายๆนะ
Read more

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

Image
กลับมาอีกแล้วกับ แอดมินนักรีวิวเซเว่นในตำนาน เหมือนจะหลุดจากวงโคจรของวิศวกรรมไปไกล แต่ก็นั่นแหละ ยังนึกไม่ออกว่าจะเขียนอะไรดี ใครอยากอ่านเรื่องอะไรก็ลองคอมเม้นมาดู ถ้าเขียนได้ จะกลับมาเขียนอย่างจริงจังนะ พูดถึงเม็ดอมที่อยู่ในเซเว่น นั้นมีหลากหลายสายพันธุ์ และเนื่องด้วยแอดมินเป็นแฟนตัวยงของเซเว่น จึงไม่พลาดเลยที่จะต้องแว๊บไปส่องโซนลูกอมเกือบทุกวัน และวันนี้ก็เช่นกันที่แอดมินสะดุดตากับเจ้า.. Dentiste Mastic Mint Bomb บอกเลยว่าใครที่ใช้ยาสีฟันของ Dentiste อยู่ เป็นต้องสะดุดแบบแอดมินแน่นอน ก็ใครจะไปนึกล่ะว่าแบรนด์ยาสีฟันจะหันมาทำเม็ดอมกะเค้าด้วย เออ เอากะเค้าสิ แบบนี้ไม่ลองไม่ได้แล้ว ซองก็ประมาณนี้ เหมือนถุงยางอ่ะ ฮ่าๆๆ ว่าแล้วก็จัดมา 1 กล่องมี 2 ซอง ในซองมี 2 เม็ด หลายคนอาจจะสับสนเหมือนแอดมินว่า Mastic ที่เขียนอยู่บนซอง มันคืออะไร จริงๆแล้วมันคือ Mastic Oil น้ำมันจากต้น Mastic ลองไป Google ดูเอา สรรพคุณของมันคือ ช่วยต้านแบคทีเรียในช่องปาก สาเหตุของการเกิดกลิ่นปากหนะเอง #ความรู้ก็มา ความรู้สึกหลังกินคือ เย็นมาก... เมื่อแอดมินบอกว่ามาก มันคือมาก You know! โดยตั
Read more