面倒くさい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"> ドラッグ可能なレイヤー2 </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 );
この2行を迷いなくライブラリに追加しておける。
次は継承で遊んでみようか。