DD: Dragged Element on Top - tetsuya

以前のログに書いたが、ドラッグされる要素のZ軸は、DDのインスタンス化の順で決定する。

この例は、YAHOO.util.DDを継承し、startDrag、endDragメソッドをoverrideして、DragされたエレメントのZ軸が一番上にくるように改造している。
YAHOO.util.DDのAPIドキュメントを参照すると、YAHOO.util.DDはYAHOO.util.DragDropのsubclassであることがわかり、startDrag、endDragはYAHOO.util.DragDropで定義されている（YAHOO.util.DragDropのAPIドキュメントはこちら）。

YUI コンポーネントを拡張する際のサンプルとしても使える。

以下が、ソースコード。

<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;
}

/*
.dd-demo-em {
    border:4px solid purple;
}
*/

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

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

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

</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">

// 1.YAHOO.util.DDを継承してDDOnTopを作る（コンストラクタの上書き）
YAHOO.example.DDOnTop = function(id, sGroup, config) {
	//superclass(YAHOO.util.DD)のコンストラクタの呼び出し。
	YAHOO.example.DDOnTop.superclass.constructor.apply(this, arguments);
};

// 2.DDOnTopの実装
YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD, {
	//　元のz軸を退避するクラス変数
	origZ: 0,
    // startDragのOverRide.
    startDrag: function(x, y) {
		// thisはDragされるelement。
        var style = this.getEl().style;

        // 元のz軸を保管する。
        this.origZ = style.zIndex;

        // Z軸の値を999（大きくする）：Dragされた要素を、一番上（onTop）に持ってくる。
        style.zIndex = 999;
    },

    // endDragのOverRide.
    endDrag: function(e) {
        // 元のZ軸に戻す。
        this.getEl().style.zIndex = this.origZ;
    }
});

// DDOnTopの利用
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {
    dd = new YAHOO.example.DDOnTop("dd-demo-1");
    dd2 = new YAHOO.example.DDOnTop("dd-demo-2");
    dd3 = new YAHOO.example.DDOnTop("dd-demo-3");
});

</script>
</HEAD>

<BODY  class=" yui-skin-sam">
<!-- 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>
</BODY>
</HTML>

YAHOO.util.DDのコンストラクタの記述を、そのAPIドキュメントでみると、

YAHOO.util.DD ( id , sGroup , config )
Parameters:
id the id of the linked element
sGroup the group of related DragDrop items
config