jquery/php/mysql에서 이미지를 정렬하는 방법 google picassa reorder interface와 (과) 동일합니까?

Question

PHP/MYSQL을 사용하고 있습니다.

이미지 정렬을위한 이미지 갤러리를 만들고 싶습니다. 사용자는 이미지를 드래그 앤 드롭하여 이미지를 정렬하고 구성 할 수 있습니다. 그냥 피카사처럼. http://jqueryui.com/demos/sortable/#display-grid

데모 페이지 : http://jsbin.com/oqani/9/

그것의 드래그 제대로 이미지를 삭제 내가 jQuery를 UI를 정렬 플러그인을 사용하여 페이지를 만든

. 하지만 사용자가 이미지를 정렬 한 후에 이미지의 현재 순서를 얻을 수는 없습니다. 현재 주문을 받으면 해당 주문에 대해 해당 주문을 db로 저장해야합니다.

가정한다 I 9 순서가 그때 이미지 재정렬 및 ​​순서 1, 3, 4, 7, 8, 2, 5되었다 화상 1, 2, 3, 4, 5, 6, 7, 8을 가지고 , 6, 9. 따라서 "Show Order"버튼을 클릭하면 주문 번호가 1, 3, 4, 7, 8, 2, 5, 6, 9으로 표시됩니다.

"Show Order"버튼을 클릭하면 현재의 이미지 순서를 보여줄 수 있습니까? 또한 특정 이미지에 대한 현재 주문을 DB에 어떻게 두는 지 개념을 알려줄 수 있습니까?

감사

Answer 1

예, 우리는 새로운 정렬 순서를 얻을 수있는 사용 start 등 update 같은 일부 이벤트가, 거기에 jQuery를 UI에서 실제로 얻었다.

<?php 
/* code in update-sort.php would look like */ 
include("includes/db.connection.php"); 

$updateRecordsArray = $_POST['recordsArray']; 
$listingCounter = 1; 
$orderedImageIds = array(); 

foreach ($updateRecordsArray as $recordIDValue){ 
    $listingCounter = $listingCounter + 1; 

    /* update query goes here */ 
    update tableName set order = $listingCounter 
} 
?> 

희망하는 데 도움이 : http://jsbin.com/oqani/10/

Answer 2

jQuery("#contentSortableUL").sortable({ 
    opacity: 0.6, 
    cursor: "move", 
    update: function(){ 
     var order = $(this).sortable("serialize"); 
     jQuery.post("update-sorting.php", order, function(theResponse){ 
      // Callback code here 
     }); 
    } 
}); 

이 업데이트-sorting.php 페이지에서 코드를 작성할 필요가 데이터베이스를 업데이트하려면 :

다음은 최종 작업 데모입니다.