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

iPhoneやAndoroidの登場により、サイトのUIが大きく変わってきています。
タップしてドラッグするといったものも通常のサイトでは使用されなかった動きではないでしょうか。
これをjQueryで実現するプラグイン「Jquery Mobile Drag And Drop」を紹介します。
スマートフォンでもドロップ&ドラッグを簡単に実現: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サンプル

sponsors

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

記事作成:
記事URL:

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