AJAXのお勉強

jQuery プラグイン EasyDrag＠AJAX

EasyDragプラグインを利用します。
ドラッグ＆ドロップの実装を簡単に行うプラグインです。

http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/で入手できます。

easydragメソッドにて、ドラッグが可能となります。
ondragメソッドにて、ドラック時のイベント処理を記述できます。
ondropメソッドにて、ドロップ時のイベント処理を記述できます。

手軽に実装できるので便利です。


<html>
<head>
<title>jQuery easydrag</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.easydrag.js"></script>
<script type="text/javascript">
<!--

    $(function(){
        $("#div1").easydrag();

        $("#div1").ondrag(function(evt, element){
            $("#msg").html("ドラッグ：" + element.id + evt.type);
        });

        $("#div1").ondrop(function(evt, element){
            $("#msg").html("ドロップ：" + element.id + evt.type);
        });
    });

// -->
</script>
</head>
<body>

<div id="div1" style="padding:5px;border-color:#333333;
border-width:1px;border-style:solid;height:100px;width:100px;background:#cccccc;">
ドラッグアンドドロップが可能です。
</div>

<div id="msg"></div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.