jquery ui-sortableポジションをDBに保存

Question

小さなウェブラジオを持っている友人のために、このページ（http://www.kissfm.ro/fresh-top-40/）の機能を再現しようとしています。このサイトはwordpress fyiで設定されています。

私の質問は、stackoverflowを検索した後、私はどのように保存/ユーザーの入力に基づいて改訂されたグラフを取得するのですか？単一の提出を保存する方法を見つけましたが、ユーザーの選択に基づいて最終的なチャートを得るにはどうすればよいですか？

ありがとうございます！ （チュートリアルへようこそ！へのコードまたはリンク）

Answer 1

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}); 
     } 
    }); 
}); 

Answer 2

私はこれが古いと知っていますが、すべてのLIに隠れた入力要素を追加するだけです。彼らは最後に[]と同じ名前をつけます。このようにして、ULを含むフォームを投稿すると、あなたのリストを置いた順にあなたの投稿値の配列が得られます。

Answer 3

Sortableのドキュメントによると、LIのIDの前に文字列を付ける必要があります。 次に、更新メソッドで並べ替えをシリアル化すると、phpで素敵な配列が得られます。 new_order [] = 1 & new_order [] = 2など

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> 

Answer 4

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}); 
     } 
    }); 
}); 

はそれがお役に立てば幸いです。）