タイトル: 項目をタッチ/クリックしてスライドさせる方法
SEOタイトル: 【jQuery】スマホやWebで項目をタッチ/クリックしてスライドさせる方法【Javascript】
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<h2>必要なライブラリ</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><link rel='stylesheet' href='</span><span style="color:#f1c40f">https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css</span><span style="color:#ffffff">' /> </span></p>
<p><span style="color:#ffffff"><script src='</span><span style="color:#f1c40f">https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js</span><span style="color:#ffffff">'></script></span></p>
<p><span style="color:#ffffff"><script src='</span><span style="color:#f1c40f">https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js</span><span style="color:#ffffff">'></script> </span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>実装</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><ul class="menu_ul"><br />
<li><br />
menu1<br />
</li><br />
<li><br />
menu2<br />
</li><br />
</ul></span></p>
<p><br />
<span style="color:#ffffff"><script><br />
$(function() {<br />
$(".menu_ul")</span><span style="color:#f1c40f">.sortable</span><span style="color:#ffffff">({<br />
</span><span style="color:#e74c3c">axis: 'y',</span><br />
<span style="color:#ffffff"> });<br />
});<br />
</script></span></p>
</td>
</tr>
</tbody>
</table>
<p><strong>axis</strong>でスライドさせる方向を指定する。</p>
<p>yは縦、xは横となる。</p>
<p> </p>
<h2>サーバーサイドに並び順を送信する方法</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><form id="</span><span style="color:#3498db">menu-sort-form</span><span style="color:#ffffff">" method="POST" action="..."><br />
<input id="_method" name="_method" type="hidden" value="PUT"><br />
<br />
<ul class="menu_ul"><br />
<li </span><span style="color:#e67e22">id="1"</span><span style="color:#ffffff">><br />
menu1<br />
</li><br />
<li </span><span style="color:#e67e22">id="2"</span><span style="color:#ffffff">><br />
menu2<br />
</li><br />
</ul><br />
<br />
<button id="</span><span style="color:#2ecc71">confirm</span><span style="color:#ffffff">">確定</button><br />
<input type="hidden" id="</span><span style="color:#f1c40f">sort_order</span><span style="color:#ffffff">" name="</span><span style="color:#f1c40f">sort_order</span><span style="color:#ffffff">" /><br />
<br />
</form></span></p>
<p><span style="color:#ffffff"><script><br />
$(function() {<br />
$(".menu_ul").sortable({<br />
axis: 'y',<br />
});<br />
});</span></p>
<p><span style="color:#ffffff">$("#</span><span style="color:#2ecc71">confirm</span><span style="color:#ffffff">").click(function() {<br />
var array = $(".menu_ul")</span><span style="color:#e74c3c">.sortable("toArray")</span><span style="color:#ffffff">;<br />
$("#</span><span style="color:#f1c40f">sort_order</span><span style="color:#ffffff">").val(array);<br />
$("#</span><span style="color:#3498db">menu-sort-form</span><span style="color:#ffffff">").submit();<br />
});</span><br />
<br />
<span style="color:#ffffff"></script></span></p>
</td>
</tr>
</tbody>
</table>
<p>確定ボタンを押すとサーバーサイドで以下の様にlistのidの値を受け取ることが出来る。</p>
<p> 'sort_order' => '1,2'</p>
<p> </p>