jquery UI 정렬 가능한 위치를 DB에 저장

jquery UI 정렬 가능한 위치를 DB에 저장

작은 웹 라디오를 가진 친구를 위해 이 페이지의 기능을 복제하려고 합니다(http://www.kissfm.ro/fresh-top-40/)).사이트는 워드프레스 fyi로 설정됩니다.

stackoverflow를 검색한 후 사용자 입력에 따라 수정된 차트를 저장/취득하려면 어떻게 해야 합니까?단일 제출을 저장하는 방법을 찾았는데 사용자 선택에 따라 최종 차트를 얻는 방법은 무엇입니까?

잘 부탁드립니다! (코드 또는 튜토리얼 링크 환영!)

HTML 정렬 가능, javascript 추가, 업데이트 시 php에 저장.

<ul id="sortable">
    <li id="1">elem 1</li>
    <li id="2">elem 2</li>
    <li id="3">elem 3</li>
    <li id="4">elem 4</li>
</ul>

$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

오래된 건 알지만 제가 하는 일은 모든 LI에 숨겨진 입력 요소를 추가하는 것뿐입니다.모두 마지막에 []가 붙은 같은 이름을 갖게 됩니다.이렇게 하면 UL이 포함된 폼을 게시할 때 목록을 넣은 순서대로 게시 값에 배열이 표시됩니다.

Sortable 문서에 따르면 LI의 ID 앞에 문자열을 붙여야 합니다.그런 다음 업데이트 방식으로 정렬 가능한 것을 직렬화하면 예를 들어 new_order[]=1&new_order[]=2 등 php로 멋진 배열을 얻을 수 있습니다.

var data = $(this).sortable('serialize');

<ul id="sortable">
    <li id="new_order_1">elem 1</li>
    <li id="new_order_2">elem 2</li>
    <li id="new_order_3">elem 3</li>
    <li id="new_order_4">elem 4</li>
</ul>

You may POST with input  to DB and save it
Here we go:
<ul id="sortable">
    <li id="1"><input type ="text" value="elem 1"/></li>
    <li id="2"><input type="text" value="elem 2"/></li>
   .
   .
</ul>
<style>
 #sortable{
  border: hidden;
}
</style>
$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
            var newOrder = $(this).sortable('toArray').toString();
            $.get('saveSortable.php', {order:newOrder});
        }
    });
});

도움이 되었으면 좋겠다;)

언급URL : https://stackoverflow.com/questions/7097168/save-jquery-ui-sortable-positions-to-db