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

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