JavaScript

jquery.pep.js:タグや画像をドラッグ&ドロップする方法

jquery.pep.jsを使って、タグや画像をドラッグ&ドロップする方法をご紹介します。
タグや画像要素をブラウザ内でドラッグ&ドロップ可能にします。

jquery.pep.jsを使って、タグや画像をドラッグ&ドロップするJavaScriptの記述

※jquery.min.js、jquery.pep.jsファイルを読み込みます。$(ドラッグ&ドロップさせる要素).pep()で設定します。

<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>

タグや画像をドラッグ&ドロップするCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
}
-->
</style>

タグや画像をドラッグ&ドロップするHTMLの記述

※imgタグにJavaScriptで指定のドラッグ&ドロップさせる要素(id=”idLogo”)を用意します。必要に応じて変更して下さい。

<div id="idWrap">
<h1>以下の画像をブラウザ内でドラッグ&ドロップ可能です。</h1>
    <div align="center">
    <img src="logo.jpg" alt="DAD UNION" id="idLogo" />
    </div>
</div>

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

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

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

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

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

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。