jquery ドラッグして移動（jquery UI / sortable）

基本

・jquery UIが必要
・詳細：jQuery Sortable（公式）
・各パラメータのまとめ：Sortable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace

直の子に「クラス：ui-state-default」を指定して、親要素で実行

▼サンプル

<table border="1" style="width:100%">
  <tbody id="tbl_sortable">
    <tr class="ui-state-default"><th>1</th><td>a</td><td>jo</td></tr>
    <tr class="ui-state-default"><th>2</th><td>a</td><td>jo</td></tr>
    <tr class="ui-state-default"><th>3</th><td>a</td><td>jo</td></tr>
    <tr class="ui-state-default"><th>4</th><td>a</td><td>jo</td></tr>
  </tbody>
</table>
<script>
  $("#tbl_sortable").sortable();
</script>

<div id="sortableArea">
  <div class="ui-state-default">１</div>
  <div class="ui-state-default">２</div>
  <div class="ui-state-default">３</div>
  <div class="ui-state-default">４</div>
  <div class="ui-state-default">５</div>
</div>
<script>
  $("#sortableArea").sortable();
</script>

並び順を取得して何かしたい

・「sortable('serialize')」で「id」の値を取得してくれる
・IDの値に「"-"(ハイフン)、"="(等号)、"_"（アンダースコア）」があるかどうかを判別・分割

<table id="hoge_target">
<tr id="foo_1"><td></td></tr>
<tr id="foo_2"><td></td></tr>
<tr id="foo_3"><td></td></tr>
</table>

<script>
jQuery('#hoge_target').sortable({
  axis:'y',
  stop: function(event,ui){
    var url_api = '〇〇.php?'+$(this).sortable('serialize');
    // 「〇〇.php?foo[]=1&foo[]=2&foo[]=3」みたいな感じになる
    // これをDBに保存させるAPIに投げたりする
  }
});
</script>

id以外を使いたいとき

・「sortable()」の第２引数にattributeで指定

～省略～
<tr id="foo_1" name="var_1"><td></td></tr>
～省略～

<script>
～省略～
    // nameを取得
    var _name = $(this).sortable('serialize', {attribute:'name'});
    // 「var[]=1&var[]=2&var[]=3」みたいな感じになる

    // idとnameの両方を取得
    var _all = '';
    _all += $(this).sortable('serialize');
    _all += '&';
    _all += $(this).sortable('serialize', {attribute:'name'});
    // 「foo[]=1&foo[]=2&foo[]=3&var[]=1&var[]=2&var[]=3」みたいな感じになる
～省略～