スマートフォンでもドロップ＆ドラッグを簡単に実現：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>
スマートフォンでもドロップ＆ドラッグを簡単に実現：Jquery Mobile Drag And Dropサンプル
コメントする
記事作成：2010年7月13日 10:00
