jquery.pep:タグや画像をドラッグ&ドロップできるJs



タグや画像要素をブラウザ内でドラッグ&ドロップ可能にできます。

1.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.pep.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//ドラッグ&ドロップさせるタグのidを指定
	$('#idLogo').pep();
});
</script>

2.HTMLの記述例

imgタグにJavaScriptで指定のid(idLogo)を設定します。

<div align="center">
<img src="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDENのロゴ画像" id="idLogo" />
</div>

jquery.pep:タグや画像をドラッグ&ドロップできるJsのデモ

ソース元:Pep – kinetic drag on mobile & desktop

使い時は…
要素を複数用意してドラッグで並び替えを行うパズル的なコンテンツですかね。
他にも色々出来そうですが。