jQuery UI 정렬 가능 및 데이터베이스 통합

jQuery UI 정렬 가능을 사용하면 사용자가 요소를 재정렬하고 특정 순서를 유지할 수 있습니다. 이 기능을 데이터베이스와 통합하려면 AJAX 또는 양식 제출과 함께 직렬화 방법을 활용할 수 있습니다.

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

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

다음과 같은 HTML 구조를 활용:

   

   

   ...

직렬화 메소드는 item[]=1&item[]=2와 같은 쿼리 문자열을 생성합니다. 여기서 각 값은 재배열된 요소의 ID를 나타냅니다.

데이터베이스 가정 ID가 요소 ID와 일치하면 게시된 데이터를 반복하여 해당 데이터베이스 레코드를 새 위치로 업데이트할 수 있습니다.

$i = 0;

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

jQuery UI Sortable을 데이터베이스와 통합하면 객체의 순서를 동적으로 유지하여 정렬 및 지속성을 위한 사용자 친화적인 인터페이스를 제공할 수 있습니다.