jquery-ui-frameworks

วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI

วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI



วิธีทำลากและวางไอเทม Drag & Drop Image หรือ Div ด้วย jQuery UI

การทำระบบ ลาก และ วางไอเทม ( Drag & Drop ) สามารถทำไปประยุกต์ใช้ในการพัฒนาเว็บไซต์ได้หลายส่วน ตัวอย่างเช่น นำไปใช้กับระบบจัดเรียง หรือ จัดลำดับ ( arrange ) ของตารางข้อมูลในส่วนของ backend การใช้ระบบลากวางแทนการกดปุ่มเครื่องหมาย เลื่อนขึ้น-ลง หรือเลื่อนซ้าย-ขวา จะสะดวกสำหรับผู้ใช้งานมากกว่า เพราะสามารถจัดลำดับได้หลายขั้นมากกว่า ไม่ต้องคลิกหลายครั้ง


ตัวอย่างการทำงาน ลากและวางไอเทม ด้วย jquery UI sortable



ใน jQuery UI จะมีฟังก์ชั่นชื่อว่า sortable ที่ทำให้เราสามารถใช้งานระบบ ลาก-วาง ได้อย่างสะดวกสบาย วิธีการใช้งานก็ง่ายมาก ๆ เพียงกำหนดให้ class หรือ id ครอบไอเทมทั้งหมด และยังมี event ต่าง ๆ ให้ใช้งานอีกด้วย

วิธีใช้งาน sortable ใน jQuery UI

  • 1. ทำการเรียกใช้งาน jQuery และ jQuery UI ดังนี้
  • 2. สร้าง class หรือ id ครอบไอเทมทั้งหมดที่ต้องการให้สามารถ drag และ drop ได้ แนะนำว่าให้สร้างในแท็ก ul li แต่จะเป็น div ก็สามารถใช้งานได้เหมือนกันครับ ตัวอย่างเช่น
  • 3. เรียกใช้คำสั่ง sortable ของ jQuery UI ง่าย ๆ แบบนี้ ไอเทมทั้งหมดที่เป็น li ก็จะสามารถลากและวางในตำแหน่งใด ๆ ก็ได้ภายในไอดี sortable
  • 4. เราสามารถใช้งาน event ต่าง ๆ ของ jQuery UI sortable เพื่อส่งตำแหน่งลำดับไปอัพเดทในฐานข้อมูลได้ดังนี้ครับ

ตัวอย่างการทำงาน ลากและวางไอเทม ด้วย jquery UI sortable


กระทู้ใกล้เคียง

รวม javascript utils ฟังก์ชั่นอรรถประโยชน์ที่ใช้งา... รวม javascript utils ฟังก์ชั่นอรรถประโยชน์ที่ใช้งานบ่อย รวม javascript utils ฟังก์ชั่นอรรถประโยชน์ที่ใช้งานบ่อย ฟังก์ชั่น Utils สำหรับการเขียนโปรแ...
ใช้งาน isotope javascript สำหรับการกรองข้อมูล filt... ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering isotope เป็น javascript library ...
ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQ... ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery ระบบการเพิ่มสินค้าลงในตะกร้าสินค้า เ...
วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจ... วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ วิธีใช้ jQuery โหลดเนื้อหาเพิ่มเมื่อเลื่อนสุดหน้าจอ เคยสังเกตุไหมครับว่าเวลาเราใช้งาน facebook...

Comments

comments