DD; Staying in a Region

Ajax YUI DD

この例（Staying in a Region）は、タイトルが示すとおり、以下の図がにある小さい矩形が、同色のキャンバス（canvas）の中だけしか動けない、というものである。


サンプルソースは、意外と地道にかかれていて、キャンバス内を動く要素は、YAHOO.util.DDを継承して作成されている。
この動きに制約を与えているのが、DDにあるDD.setXConstraint()とDD.setYConstraint()の２つのメソッドである。これは、DDインスタンスのX軸、Y軸それぞれの方向への動きを制限するものである。(DDのAPIドキュメントはこちら)

<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"> 
.dd-demo {
    position: relative;
    text-align: center;
    color: #fff;
    cursor: move;
    height: 60px;
    width: 60px;
    padding: 0;
    margin: 0;
}

.dd-demo div {
    border: 1px solid black;
    height: 58px;
    width: 58px;
}

#dd-demo-canvas1 {
    padding: 55px;
    background-color: #7E5B60;
    border: 1px solid black;
}
#dd-demo-canvas2 {
    padding: 25px;
    background-color: #566F4E;
    border: 1px solid black;
}
#dd-demo-canvas3 {
    padding: 15px;
    background-color: #6D739A;
    border: 1px solid black;
}

#dd-demo-1 { 
    background-color:#6D739A;top:5px; left:5px;
}

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

#dd-demo-3 {
    background-color:#7E5B60;top:-100px; 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 Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
dd1, dd2, dd3;

// DDRegion作成の準備
YAHOO.example.DDRegion = function(id, sGroup, config) {
	this.cont = config.cont;
	YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments);
};

//YAHOO.util.DDを継承して、DDRegionを作る。
YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, {
	// contは呼び出し時に上書きされる。
	cont: null,
	init: function() {
    	// スーパークラスのinitを呼ぶ。
    	YAHOO.example.DDRegion.superclass.init.apply(this, arguments);

    	this.initConstraints();
    	
    	// windowがresizeされたらinirConstraintsをよぶEventを仕掛ける。
    	Event.on(window, 'resize', function() {
        	this.initConstraints();
    	}, this, true);
	},
	
	initConstraints: function() {
		// cont（canvas）の領域（top,right,bottom,left）を求める。
    	var region = Dom.getRegion(this.cont);

    	//この（DDRegion）インスタンスの要素オブジェクトの取り出し。
    	var el = this.getEl();

    	//座標（x=right、topを取り出す）
    	var xy = Dom.getXY(el);

    	//DDインスタンスの幅、高さを10進整数としてパースする。
    	var width = parseInt(Dom.getStyle(el, 'width'), 10);
    	var height = parseInt(Dom.getStyle(el, 'height'), 10);

    	//DDインスタンスのX(left)-canvasのleft値（leftとして動けるpix）
    	var left = xy[0] - region.left;

    	//canvasのright値-(DDインスタンスのleft値＋インスタンスの幅）
    	//DDインスタンスがrightへ動ける距離
    	var right = region.right - xy[0] - width;

    	//Set top to y minus top
    	//DDインスタンスのY(top)-canvasのtop値（topとして動けるpix）
    	var top = xy[1] - region.top;

    	//Set bottom to bottom minus y minus height
    	//canvasのbottom値-(DDインスタンスのtop値＋インスタンスの高さ）
    	//DDインスタンスがbotomへ動ける距離
    	var bottom = region.bottom - xy[1] - height;

    	//DD.setXConstraint(),DD.setYConstraint()を使って動きに
    	//制約（Constraint）を与える
    	//X軸に沿っては（上で求めたleftとrightの間を動ける）
    	this.setXConstraint(left, right);
    	//Y軸に沿っては（上で求めたtopとbottomの間を動ける）
    	this.setYConstraint(top, bottom);
	}
});


Event.onDOMReady(function() {
	// DDRegionのプロパティーcontを上書きする呼び出し。
	dd1 = new YAHOO.example.DDRegion('dd-demo-1', '', 
			{ cont: 'dd-demo-canvas3' });
	dd2 = new YAHOO.example.DDRegion('dd-demo-2', '', 
			{ cont: 'dd-demo-canvas2' }) ;
	dd3 = new YAHOO.example.DDRegion('dd-demo-3', '', 
			{ cont: 'dd-demo-canvas1' });
});

</script>
</HEAD>

<BODY>
<div id="dd-demo-canvas1">
    <div id="dd-demo-canvas2">
        <div id="dd-demo-canvas3">
            <div id="dd-demo-1" class="dd-demo"><div>1</div></div>
            <div id="dd-demo-2" class="dd-demo"><div>2</div></div>
            <div id="dd-demo-3" class="dd-demo"><div>3</div></div>
        </div>
    </div>
</div>
</BODY>
</HTML>

次にある、Using the Drag Shimのサンプリングは省略する。