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

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

sponsors

使用方法

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

sponsors


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