DD: Using Handles

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

でインスタンス化された要素は、その枠内のどこでMousedownしてもDragを開始できる。

Handle（YUIのページはこちら）とは、特定の域でMousedownすることにDragの開始を制限する方法である。
Handleには、InnerhandleとOuterhandleの２つがあり、ともにYAHOO.util.DDのメソッドとして定義されている。

名前 意味 DDのメソッド
InnerHandle Dragする要素の子要素で、一緒にDragされる setHandleElId("element_id")
OuterHandle Dragする要素の兄弟要素で、一緒にDragされない setOuterHandleElId("element_id")

サンプルコードは以下。
Handleの形状や色がStyleで書かれていることに注意。

<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する要素を含むDivのスタイル（初期値）*/
#playground {
    position: relative;
    height: 200px;
}

/* Drag & Dropされる要素に共通のスタイル*/
.dd-demo {
    position:absolute;
    border:4px solid #666;
    text-align:center;
    color:#fff;
    height:60px;
    width:60px;
}

/* デモ１のハンドラのスタイル*/
.dd-demo .dd-multi-handle-1 {
    background: #336699; float: left;
    cursor:move;
}

.dd-demo .dd-multi-handle-2 {
    background: #336699; float: right;
    cursor:move;
}

/* デモ２のハンドラのスタイル*/
.dd-demo .dd-handle {
    background: #003366;
    cursor:move;
}

/* デモ３のハンドラのスタイル*/
.dd-outer-handle {
    position:relative;
    background: red;
    cursor:move;
    height: 20px;
    width: 3em;
    text-align:center;
    top:0px; left:200px;
}

/*　使ってない
.dd-demo-em {
    border:4px solid purple;
}
*/

/* Drag & 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:20px; 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">
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady(function() {

	//1.ハンドルがDDの内側にある。setHandleElId
	dd = new YAHOO.util.DD("dd-demo-1");
    // ハンドルはDD内にいくつも設定できる。
    dd.setHandleElId("dd-handle-1a");
    dd.setHandleElId("dd-handle-1b");

	//2.ハンドルがDDの内側にある。
    dd2 = new YAHOO.util.DD("dd-demo-2");
    dd2.setHandleElId("dd-handle-2");

	//2.ハンドルがDDの外側にある。setOuterHandleElId
    dd3 = new YAHOO.util.DD("dd-demo-3");
    // ハンドルはdd3の外にいくつもくっつけられる。
    dd3.setOuterHandleElId("dd-handle-3b");
});
</script>
</HEAD>

<BODY>
<!-- Drag and Dropする要素 -->
<div id="playground">
<div id="dd-demo-1" class="dd-demo">
    <div id="dd-handle-1a" class="dd-multi-handle-1">H1</div>
    <div id="dd-handle-1b" class="dd-multi-handle-2">H2</div>
<div>デモ１</div>
</div>
<div id="dd-demo-2" class="dd-demo">
    <div id="dd-handle-2" class="dd-handle">H</div>
デモ２
</div>

<div id="dd-handle-3b" class="dd-outer-handle">Outer</div>
<div id="dd-demo-3" class="dd-demo">デモ３</div>
</div>
</BODY>
</HTML>

サンプルイメージ（移動後）は以下。OuterHandleは楽しい動きをする。