「jquery.pep.js」のデモ拡張

仕事で、スマートフォンでもオブジェクトをドラッグ＆ドロップでスムーズに動くjavascriptライブラリをが必要になりました。

作るのはめんどくさいしね。

jQuery UIとかあるけど、スマートフォンには対応していなかった気がするし、確か重かった気がする。

そこで見つけたのがjquery.pep.js

これいい！

ライセンスもMITライセンスなので楽ちん

ってことで、さっそくGithubからソースをダウンロード！

ちなみにZIPって書いてあるボタンからダウンロードできます。

ダウンロードしたファイルの中にはjQuery v1.7.2も入ってました。

[jwuery.pep.js-mastar]=>[demos]をさっそくいろいろ動かしてみると、ホームページにはないデモもいっぱい。

そこで、さっそくその中の一つ

[jwuery.pep.js-mastar]=>[demos]=>[constrain-to.html]

をいじってみました。

作ったものの機能は以下のものです。

・addボタンでオブジェクトの追加

・オブジェクトのダブルクリックでそのオブジェクトを削除

後は、pepのデモにあったのを流用

以上！ｗｗｗ

以下がそのソースの一部になります。

htmlのbody以下のソース

    	<input type="button" value="add" />
<div id="parent">
<div class="pep peppable">constrained to parent</div>
</div>

javascript

$(document).ready(function(){
    addPep();
	deletePep();
});

function addPep(){
	$('.peppable').pep({ constrainToParent: true , debug: true});
}

function deletePep(){
	$('.peppable').dblclick(function(){
		$(this).remove();
	});
}

$(function(){
	$("input[value=add]").click(function(){
		$("div#parent").append('<div class="pep peppable">constrained to parent</div>');
		addPep();
		deletePep();
	});
});

CSS

body{ padding: 0; margin: 0; }
input[value="add"]{ margin: 30px 0 0 30px;}
#parent{ border: 5px solid #666; width: 800px; height: 500px; margin: 5px 0 0 30px; }
.pep{ width: 200px; height: 200px; background: rgb(243, 200, 200); color: white; }

簡単だな～。

ってか、jquery.pep.js自体のソースコード800行ないってすごいね。