【jQuery】iPad・iPnoneにも対応！ドラッグ＆ドロップで移動できるリストを作る方法

なんだか難しそうに見えるドラッグで動かして順番を変えれるコンテンツもjQueryを使うことで簡単に実装できます。

こんなやつ

まずはデモをご覧下さい。ドラッグでダムの順番を入れ替えれるかと思います。

デモページ

使用するjQueryとプラグイン

3つのJavascriptファイルを使います。

jQuery.js
jQuery-ui.js
jQuery.ui.touch-punch.js

上の2つのJavascriptがあればPCで動きます。
最後のJavascriptはiPhone・iPadで動作させる為のプラグインです。

Javascript

上記3ファイルを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script>

jQueryとjQuery-ui.jsはGoogle AJAX Libraries APIから呼び出すことができます。
jquery.ui.touch-punch.jsはファイルを設置して読み込みましょう

その下にsortableを実行させる命令文を書きます。

<script>
$(function() {
	$('#sortable').sortable();
	$('#sortable').disableSelection();
});
</script>

デモページではいくつかオプションを指定しているのでソースを参考にしてみてください。

HTML

<ul id="sortable">
  <li><img src="/demo/change_pic/img/01.jpg" width="100" height="100">
  画像1<br>
  下筌ダム</li>
  <li><img src="/demo/change_pic/img/02.jpg" width="100" height="100">
  画像2<br>
  石打ダム</li>
  <li><img src="/demo/change_pic/img/03.jpg" width="100" height="100">
  画像3<br>
  船津ダム</li>
  <li><img src="/demo/change_pic/img/04.jpg" width="100" height="100">
  画像4<br>
  緑川ダム</li>
</ul>

普通にリストを書いて、ulにid=”sortable”を追加するだけです。