jquery.pep.js：タグや画像をドラッグ＆ドロップする方法 DAD UNION

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

Contents

jquery.pep.jsを使って、タグや画像をドラッグ＆ドロップするJavaScriptの記述
タグや画像をドラッグ＆ドロップするCSSの記述
タグや画像をドラッグ＆ドロップするHTMLの記述
jquery.pep：タグや画像をドラッグ＆ドロップできるJsのデモページ
- ソース元：>Pep - kinetic drag on mobile & desktop

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>