◀ 11.

【jQuery】スマホやWebで項目をタッチ/クリックしてスライドさせる方法【Javascript】

▶
編集

必要なライブラリ

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css' />  

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>  

 

実装

<ul class="menu_ul">
    <li>
        menu1
    </li>
    <li>
        menu2
    </li>
</ul>


<script>
$(function() {
    $(".menu_ul").sortable({
        axis: 'y',
    });
});
</script>

axisでスライドさせる方向を指定する。

yは縦、xは横となる。

 

サーバーサイドに並び順を送信する方法

<form id="menu-sort-form" method="POST" action="...">
    <input id="_method" name="_method" type="hidden" value="PUT">
    
    <ul class="menu_ul">
        <li id="1">
            menu1
        </li>
        <li id="2">
            menu2
        </li>
    </ul>
    
    <button id="confirm">確定</button>
    <input type="hidden" id="sort_order" name="sort_order" />
    
</form>

<script>
$(function() {
    $(".menu_ul").sortable({
        axis: 'y',
    });
});

$("#confirm").click(function() {
    var array = $(".menu_ul").sortable("toArray");
    $("#sort_order").val(array);
    $("#menu-sort-form").submit();
});

</script>

確定ボタンを押すとサーバーサイドで以下の様にlistのidの値を受け取ることが出来る。

 'sort_order' => '1,2'

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 導入方法
  2. 文法
  3. HTML/CSS操作・制御
  4. 要素の取得
  5. 値の取得
  6. 値と要素の追加
  7. 値と要素の削除
  8. 子要素の削除
  9. 要素のコピー
  10. Ajax
  11. 項目をタッチ/クリックしてスライドさせる方法
  12. テキスト/セレクトボックス/ラジオボタン変更時のイベント
  13. パスワードを一時的に表示させる方法
  14. $(document).ready(function() { ...
  15. セレクトボックスにオプションを追加する方法
2019-01-13 04:51:47 爽健 889

人気ページ

最近更新/作成されたページ