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

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

1.JavaScriptの記述例

<script type="text/javascript" src="https://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="logo.jpg" alt="DAD UNION" id="idLogo">
</div>

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

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

使い時は…ドラッグできる要素を複数用意して並び替え等を行うパズル的なコンテンツですかね。