jQuery UI sortable - 이미지 정렬

Question

방금 ​​jQuery UI 정렬 가능한 플러그인을 이미지 세트에 구현했습니다. 다음과 같이 내가 가진 태그는 다음과 같습니다

<ul id="images" class="ui-sortable"> 
    <li id="7884029"><img src="/images/member/4698568/7884029_t.jpg" alt="" /></li> 
    <li id="7379458"><img src="/images/member/4698568/7379458_t.jpg" alt="" /></li> 
    <li id="1704208"><img src="/images/member/4698568/1704208_t.jpg" alt="" /></li> 
    <li id="1750715"><img src="/images/member/4698568/1750715_t.jpg" alt="" /></li> 
    <li id="4364912"><img src="/images/member/4698568/4364912_t.png" alt="" /></li> 
</ul> 

<script type="text/javascript"> 
/*<![CDATA[*/ 
jQuery(function($) { 
    jQuery('#images').sortable({'delay':'100'}); 
}); 
/*]]>*/ 
</script> 

리 id는 DB 테이블의 '이름'열입니다 - 나는 ID 열을 표시하지 않도록 선호합니다.

이제 제 질문은 어떻게 정렬을 캡처합니까? 이것이 AJAX 요청이 될 것이라는 것을 이해하지만 어떻게 해야할지 잘 모릅니다. 내 DB 테이블에 sort_order 열을 설정하고 스크립트 언어로 PHP를 사용하고 있습니다. 코드 예제로 할 수 있습니다.

편집 : 정렬 순서 항목을 이동에 적용되는 경우

가 이상적으로 원하는, 즉 나는 형태로 모두 둘러싸 싶지 않아요.

Answer 1

, 이렇게 :

첫째, 정렬에 의해 예상되는 밑줄 형식으로 항목 'ID의 형식을 변경 : 다음

<li id="image_7884029"><img ... 
<li id="image_7379458"><img ... 

, 그 stop 이벤트에서의 정렬 serialize 방법을 사용하십시오

... // Within your sortable() setup, add the stop event handler: 
stop:function(event, ui) { 
    $.ajax({ 
    type: "POST", 
    url: path/to/your/ajax/reorder.php, 
    data: $("#images").sortable("serialize") 
    }); 
} 
... 

$("#images").sortable("serialize")을 사용하면 정렬 가능한 serialize 방법은 #images의 하위 항목을 통과합니다. 즉 모든 li 요소를 찾아서 찾은 모든 ID를 바꿉니다 (image_7884029, image_7379458 등).) image[]=7884029&image[]=7379458..., 과 같은 항목 목록에 정렬하려면 (이후 stop()이라고 부르기 때문에) 목록에 표시된 순서대로 정렬합니다. 기본적으로 이것은 폼을 게시 할 때 체크 박스의 배열이 전송되는 것과 비슷하게 작동합니다.

그런 다음 SORT_ORDER 컬럼에 새 값을 할당, 서버 측 "reorder.php"이를 선택할 수 있습니다 :

$items = $_POST['image']; 
if ($items) { 
    foreach($items as $key => $value) {   
    // Use whatever SQL interface you're using to do 
    // something like this: 
    // UPDATE image_table SET sort_order = $key WHERE image_id = $value 
    } 
} else { 
    // show_error('No items provided for reordering.'); 
} 

하면됩니다.

Answer 2

방금 ​​해 보았습니다. 방법은 다음과 같습니다.

양식을 사용하여 #images 요소를 둘러싸고 있습니다. 액션은 아약스 스크립트를 가리 킵니다. 당신은 이미지 순서를 다시 할 때

, JQuery와 정렬 업데이 트를 캡처과 유사한 이벤트가 중지 : 다음 postUpdateOrder()에서

$("#images").sortable({ 

    // configuration 
    delay: 100, 
    items: 'li', 
    update: function(event, ui) { 

    // Update order indexes 
    updateOrderIndexes(); 
    }, 
    stop: function(event, ui) { 

    // fire off the update method 
    postUpdateOrder(); 
    } 
}); 

function updateOrderIndexes() 
{ 
    // Update the order index on each item 
    var orderIndex = 1; 
    $("#images li").each(function() { 

    $(this).find("input[type=hidden]:first").val(orderIndex); 
    orderIndex++; 
    })  
} 

를 각각의 이미지 외에도, 숨겨진 입력 필드의 예를 함수를 작성해야한다면 jQuery의 $.post 함수를 사용하여 서버에 AJAX 게시물 요청을 다시 수행 할 수 있습니다. 각 필드는 PHP 스크립트의 $ _POST 배열에서 사용할 수 있습니다.이 배열은 새 색인 값과 함께 ID별로 이름이 지정됩니다. 필요에 따라 유효성 검사를하고 새 값을 저장 한 다음 OK/오류를 다시 브라우저로 보냅니다. 형태를 둘러싸하지 않는 사용자의 편집 요구 사항에 따라

업데이트, 당신은 아직도 당신의 자바 스크립트 어딘가에 예를 들어 var에 myRoute = '/some/path/to/script.php'에 AJAX URL을 넣어, 모든 주문 관련 입력 필드에 클래스를 추가하는 등하여이 작업을 수행 할 수 jQuery를 사용하여 $("input.myclass").each() 스타일 코드를 기반으로 서버에 직접 보내도록 데이터를 구성하십시오. 본질적으로 필자는 입력 필드를 클라이언트 측의 데이터 저장소로 사용합니다. 그러나 원하는대로이 작업을 수행 할 수 있습니다.

양식을 제출하는 등의 작업을하지 않아도 AJAX 스크립트로 보낼 데이터를 직렬화하는 것이 더 쉬워집니다.이 작업은 AJAX 스크립트로 보내기를 중지하면 자동으로 시작됩니다. 위 코드를 사용하는 경우 기본적으로