この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:爽健
更新日時:2019-01-13 04:24:08

タイトル: 項目をタッチ/クリックしてスライドさせる方法
SEOタイトル: 【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は横となる。