skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

要素を簡単にドラッグできるjavascript「EasyDrag jQuery Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

要素をドラッグすることがあるかもしれません。
そんな時はEasyDrag jQuery Pluginを利用すれば簡単に実現できます。

使用方法
EasyDrag jQuery Pluginからjquery.easydrag.jsをjQueryからjquery.jsをダウロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("要素").easydrag();
});
</script>
上記を記述したら、あとはドラッグしたい要素を書き込めば完成です。
オプションを利用することで、ドラッグ時、ドロップ時にイベントを起こすことが出来ます。
$("要素").ondrop(function(e, element){ alert("Thanks for Dragging")}); //ドロップ時
$("要素").ondrag(function(e, element){ alert("You're Dragging!!")}); //ドラッグ時
要素を簡単にドラッグできるjavascript「EasyDrag jQuery Plugin」サンプル

記事作成：2008年01月15日

前の記事：jQueryでCSSを切り替えるjavascript「Switch stylesheets with jQuery」
次の記事：シンプルなニュースティッカーjavascript「aScroller」