ドラッグ&ドロップで並べ替えた順番を送信

jQuery UI の Sortable プラグインを使い、ドラッグ&ドロップで並べ替えた順番を、送信する方法。
「この並び順を送信」ボタンを押すと、「この順番でよろしいですか?」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。

実装例(サンプル)

  • 項目名 A (項目ID:1)
  • 項目名 B (項目ID:2)
  • 項目名 C (項目ID:3)
  • 項目名 D (項目ID:4)
  • 項目名 E (項目ID:5)

実装例の動作について

  1. 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。
  2. 「この並び順を送信」ボタンを押すと、
    項目名 B (項目ID:2)
    項目名 A (項目ID:1)
    項目名 C (項目ID:3)
    項目名 D (項目ID:4)
    項目名 E (項目ID:5)
    【この順番でよろしいですか?】

    という内容の確認ダイアログが出現する。

  3. 確認ダイアログ内で、「OK」を選択した場合、送信を実行し、確認ダイアログ内で、「キャンセル」を選択した場合は、送信を中止する。送信するのは、「項目ID:」の後の数字のみで、「2,1,3,4,5,」となる。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-sortable' ) . sortable();
    jQuery( '#jquery-ui-sortable' ) . disableSelection();
    jQuery( '#submitSortable' ) . click( function() {
        var itemNames = '';
        var itemIDs = '';
        jQuery( '#jquery-ui-sortable li' ) . map( function() {
            itemNames += jQuery( this ) . text() + '\n';
            itemIDs += jQuery( this ) .children( 'span' ) . text() + ',';
        } );
        if( confirm( itemNames + '【この順番でよろしいですか?】' ) ){
            location . href = '#itemIDs=' + itemIDs;
        }
    } );
} );
// -->
</script>
送信先について
location . href = '#itemIDs=' + itemIDs;

この部分の送信先は、それぞれの用途に応じて変更する必要がある。
例えば、PHP の場合、

location . href = 'foo.php?itemIDs=' + itemIDs;

Perl の場合、

location . href = 'foo.cgi?itemIDs=' + itemIDs;

など。

CSS

<style>
<!--
#jquery-ui-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70%;
}
#jquery-ui-sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.3em;
    padding-left: 1em;
    font-size: 15px;
    font-weight: bold;
    cursor: move;
}
-->
</style>

HTML

<ul id="jquery-ui-sortable">
    <li class="ui-state-default">項目名 A (項目ID:<span>1</span>)</li>
    <li class="ui-state-default">項目名 B (項目ID:<span>2</span>)</li>
    <li class="ui-state-default">項目名 C (項目ID:<span>3</span>)</li>
    <li class="ui-state-default">項目名 D (項目ID:<span>4</span>)</li>
    <li class="ui-state-default">項目名 E (項目ID:<span>5</span>)</li>
</ul>
<input type="button" id="submitSortable" value="この並び順を送信">

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Sortable, フォーム パーマリンク