11.

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

ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!

必要なライブラリ

<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'

 

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

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。