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

jquery-ui-frameworks
jquery-ui-frameworks

วิธีทำลากและวางไอเทม 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 ดังนี้
  • <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  • 2. สร้าง class หรือ id ครอบไอเทมทั้งหมดที่ต้องการให้สามารถ drag และ drop ได้ แนะนำว่าให้สร้างในแท็ก ul li แต่จะเป็น div ก็สามารถใช้งานได้เหมือนกันครับ ตัวอย่างเช่น
  • <ul id="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  • 3. เรียกใช้คำสั่ง sortable ของ jQuery UI ง่าย ๆ แบบนี้ ไอเทมทั้งหมดที่เป็น li ก็จะสามารถลากและวางในตำแหน่งใด ๆ ก็ได้ภายในไอดี sortable
  • $('#sortable').sortable();
  • 4. เราสามารถใช้งาน event ต่าง ๆ ของ jQuery UI sortable เพื่อส่งตำแหน่งลำดับไปอัพเดทในฐานข้อมูลได้ดังนี้ครับ
  • $('#sortable').sortable({
            start: function(event, ui) {
                var start_pos = ui.item.index();
                ui.item.data('start_pos', start_pos);
            },
            change: function(event, ui) {
                var start_pos = ui.item.data('start_pos');
                var index = ui.placeholder.index();
            },
            update: function(event, ui) {
    			var start_pos = ui.item.data('start_pos');
                var index = ui.placeholder.index();
            }
        });

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