面倒くさいJavascriptの整理−prototype.js

id:higepon:20050831
id:higepon:20050901
でprototype.jsを知った。

すごい。
非常に便利だ。万歳！

動作確認がてら、昔懐かしい「ドラッグ可能なレイヤー」を実装してみた。

外部ファイル部分

var CDragable = Class.create();
CDragable.prototype = {
	initialize : function( elm ){
		this.elm  = $( elm );
		this.elm.style.position = "absolute";
		this.offsetX = 0;
		this.offsetY = 0;
		this.elm.onmousedown 	  = this._onMouseDown.bindAsEventListener(this);
		this.elm.onselectstart    = this._onSelectStart.bindAsEventListener(this);
	} ,
	target:null,
	_onSelectStart : function( event ) {
		//IE
		return false;
	},
	_onMouseMove : function( event ){
		var target = CDragable.prototype.target;
		if( target )
		{
			target.elm.style.left = ( Event.pointerX( event ) - target.offsetX ).toString() + "px";
			target.elm.style.top  = ( Event.pointerY( event ) - target.offsetY ).toString() + "px";
		}
	},
	_onMouseDown : function ( event ){
		if( !CDragable.prototype.target){
			CDragable.prototype.target = this;
			var x = this.elm.style.left || this.elm.offsetLeft;
			var y = this.elm.style.top  || this.elm.offsetTop;
			this.offsetX = 	Event.pointerX( event ) - parseInt( x );
			this.offsetY =  Event.pointerY( event ) - parseInt( y );
		}
	},
	_onMouseUp : function ( event ){
		if( CDragable.prototype.target ){
		 	CDragable.prototype.target = null;
		}
	}
};

Event.observe( document , 'mousemove' , CDragable.prototype._onMouseMove , false );
Event.observe( document , 'mouseup'   , CDragable.prototype._onMouseUp   , false );

実装部

var mo;
var po;

window.onload = function()
{
 //通常なら特に変数に格納する必要はないが一応
 mo = new CDragable( "foo" );
 po = new CDragable( "bar" );
}

タグ部

<div id="foo">
ドラッグ可能なレイヤー
</div>
<div id="bar">
ドラッグ可能なレイヤー２
</div>

base.js,event.jsを読みながら、30分程でこれができた。驚異的だ。
(zIndexの処理は面倒なので未実装）
prototypeが普通に動くか心配だったけど、どうやらこれで大丈夫らしい。
特にイベントの処理がすばらしいと思う。
bindAsEventListenerは直感的だし、Event.observeは最高だ。
document.onmousemoveを占有しないので、
Event.observe( document , 'mousemove' , CDragable.prototype._onMouseMove , false );
Event.observe( document , 'mouseup' , CDragable.prototype._onMouseUp , false );
この２行を迷いなくライブラリに追加しておける。
次は継承で遊んでみようか。