DD: Using a Proxy Element

Ajax YUI DD

Proxy Elementとは、ドラッグされるときに元の要素の代わりとして生成されるオブジェクトのことである。
これを利用することで、元の要素（元のデザイン）を崩さずにDrag and Dropが可能になる。
Proxyは、

            dd = new YAHOO.util.DDProxy("element_id");

というたった一行のコードで作成される。
デフォルトで生成されるProxyは、元の要素（id="element_id")と同じ大きさで、2pixの灰色のボーダーラインを持った枠である。

以下にサンプルの完全なコードを示す。サンプルでは、Custom Proxy（2pixの灰色の枠ではなく、もっと変わったProxyを使いたい時に利用する）も作成している。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
/* Drag and Dropする要素に共通のスタイル*/
.dd-demo {
    position:relative;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    cursor:move;
    height:60px;
    width:60px;
}

/* Drag and Dropする要素に個別のスタイル*/
#dd-demo-1 { 
    background-color:#6D739A;top:0px; left:0px;
}

#dd-demo-2 { 
    background-color:#566F4E;top:50px; left:100px; height: 80px; width: 80px;
}

#dd-demo-3 {
    background-color:#7E5B60;top:-150px; left:200px; height: 100px; width: 100px;
}

/* Drag and DropするProxy要素に個別のスタイル*/
#dd-demo-3-proxy {
    position: absolute; 
    visibility: hidden; 
    color: #fff;
    text-align:center;
    background-color:#000; 
    height:100px; 
    width: 100px;
}

</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dragdrop/dragdrop-min.js" >
</script> 

<script type="text/javascript">
        var dd, dd2, dd3;
		// DomReadyで発火する。
        YAHOO.util.Event.onDOMReady(function() {
            // 最初の２つのProxyインスタンスはuilityによって、
            // 自動的に作成される。
            // ProxyはDragされるときに、元のエレメントと同じ大きさに
            // リサイズされる。
            // デフォルトでは、2pixの灰色のborderの枠となる。
            dd = new YAHOO.util.DDProxy("dd-demo-1");
            dd2 = new YAHOO.util.DDProxy("dd-demo-2");

            // 3つめの要素はcustom proxyを使う。
            dd3 = new YAHOO.util.DDProxy("dd-demo-3", "default", { 

		// custom proxyを作成する。（普通のDIV）
		// もし、用意してなかったら作成される。
                dragElId: "dd-demo-3-proxy", 

		// Dragが始まるとProxyは（デフォルトでは）元の要素の大きさ
		// にResizeされる。
		// Styleで指定した大きさを変えたくなければ、offにして
		// 固定された大きさのProxyをとする。
                resizeFrame: false
                });
        });
</script>
</HEAD>

<BODY>
<!-- Drag and Dropする要素 -->
<div id="dd-demo-1" class="dd-demo">デモ１</div>
<div id="dd-demo-2" class="dd-demo">デモ２</div>
<div id="dd-demo-3" class="dd-demo">デモ３</div>
<div id="dd-demo-3-proxy">Custom</div>
</BODY>
</HTML>

CustomProxyにつかうDIVは、DragしたいDIVの兄弟要素になっている。

画面は以下のようになる。