Bagaimanakah saya boleh menggunakan jQuery UI Sortable untuk Mengemas kini Pesanan Pangkalan Data pada Drag-and-Drop?

Penyepaduan Pangkalan Data dengan jQuery UI Sortable

Fungsi boleh sorting jQuery UI membolehkan pengguna memanipulasi susunan elemen, dan persoalan timbul tentang bagaimana untuk merekodkan perubahan ini dalam a pangkalan data.

Penyelesaian

JQuery UI Sortable termasuk kaedah bersiri() terbina dalam yang menyelaraskan proses ini. Contoh berikut menunjukkan cara menulis susunan yang dikemas kini ke pangkalan data apabila perubahan kedudukan elemen:

$('#sortable').sortable({
  axis: 'y',
  update: function (event, ui) {
    var data = $(this).sortable('serialize');

    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});

Kaedah Serialkan

Kaedah serialize() mencipta tatasusunan elemen boleh disusun, menggunakan atribut id mereka. Tatasusunan ini kemudiannya dihantar ke bahagian belakang menggunakan fungsi $.post() atau $.ajax(), yang menghantar permintaan POST ke URL yang ditentukan.

Pemprosesan Belakang

Di bahagian belakang, rentetan pertanyaan POST boleh diproses untuk mengekstrak pesanan baharu. Setiap id elemen biasanya sepadan dengan ID pangkalan data, membenarkan kemas kini pangkalan data yang mudah.

Contoh Kemas Kini Pangkalan Data dalam PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
  // Execute statement:
  // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
  $i++;
}

Dengan menggabungkan jQuery UI Sortable's serialize( ) dengan pemprosesan bahagian belakang, anda boleh dengan mudah melaksanakan manipulasi pesanan dinamik dan penyegerakan pangkalan data, meningkatkan interaksi pengguna dengan anda aplikasi berasaskan pangkalan data.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan jQuery UI Sortable untuk Mengemas kini Pesanan Pangkalan Data pada Drag-and-Drop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!