スマートフォンでもドロップ＆ドラッグを簡単に実現：Jquery Mobile Drag And Drop

iPhoneやAndoroidの登場により、サイトのUIが大きく変わってきています。
タップしてドラッグするといったものも通常のサイトでは使用されなかった動きではないでしょうか。
これをjQueryで実現するプラグイン「Jquery Mobile Drag And Drop」を紹介します。

使用方法

Jquery Mobile Drag And Dropからファイルをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.mobiledragdrop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".class名1").mobiledraganddrop({ 
		targets: ".class名2" //ドロップエリアのclass名
	});
});
</script>
上記を記述したらドラッグさせたい要素とドロップしたい要素にclassを付与すれば完成です。

<div class="class名2">
	<p>ここにドラッグ！</p>
</div>
<div class="class名1">
	<p>Drag 1</p>
</div>

サンプル

ここにドラッグ！

ここにドラッグ！

Drag 1

Drag 2

Drag 3


Javascriptサンプルページ一覧
skuare.net