DD: Basic Drag and Drop

Ajax YUI DD

YUIに最初に掲示されているサンプルは、３つのDraggableなDivを作成するもの。

超基本的ではあるが、サンプリングしておく。

<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:105px;
}

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

#dd-demo-3 {
    background-color:#7E5B60;top:-150px; left:385px;
}
</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;
// DomのReadyで発火する。
YAHOO.util.Event.onDOMReady(function() {
    dd = new YAHOO.util.DD("dd-demo-1");
    dd2 = new YAHOO.util.DD("dd-demo-2");
    dd3 = new YAHOO.util.DD("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>

Draggalble FloatなDivが、

    dd = new YAHOO.util.DD("dd-demo-1");

だけのコードで書けるのは、小気味いい。

デモ画面は以下。

動かしてみると、重ねた場合、インスタンスを作成した順にz軸が大きく設定されているということ。
デモ１をデモ３に重ねると、デモ１が下に入ってしまう。
直感的には、Dragしていったものが上にくるのが望ましいから、DropイベントでZ軸を変えるようにJavascriptで書いてしまうのかな。
YUIで用意がされているかもしれない。