プロトタイプjsテーブルサイズ変更可能な列

Question

プロトタイプjsを使用してテーブル列をサイズ変更可能にしようとしていますが、jquery hereを使用して解決策を見つけましたが、プロトタイプjsフレームワークを使用して同じ結果を得るにはどうすればよいですか？

jqueryの：私はプロトタイプで同じ試み

var pressed = false; 
    var start = undefined; 
    var startX, startWidth; 

    $("table th").mousedown(function(e) { 
     start = $(this); 
     pressed = true; 
     startX = e.pageX; 
     startWidth = $(this).width(); 
     $(start).addClass("resizing"); 
    }); 

    $(document).mousemove(function(e) { 
     if(pressed) { 
      $(start).width(startWidth+(e.pageX-startX)); 
     } 
    }); 

    $(document).mouseup(function() { 
     if(pressed) { 
      $(start).removeClass("resizing"); 
      pressed = false; 
     } 
    }); 

：

var pressed = false; 
var start = undefined; 
var startX, startWidth; 
Event.observe($('t1'), "mousedown",function(event){ 
    console.log('mousedown'); 
    start = $(this); 
     pressed = true; 
     startX = Event.pointerX(event); 
     startWidth = $(event.srcElement).getWidth(); 
     $(start).addClassName("resizing"); 
}); 

Event.observe($('t1'), "mousemove",function(event){ 
    console.log('mousemove'); 
    if(pressed) { 
     document.getElementById(start.id).style.width = ''+startWidth+(Event.pointerX(event)-startX)+'px';  
    } 
}); 

Event.observe($('t1'), "mouseup",function(event){ 
    console.log('mouseup'); 
    if(pressed) { 
      $(start).removeClassName("resizing"); 
      pressed = false; 
     } 
}); 

幅増加ではなく、適切。問題が何であるか誰にでも示唆できますか？

Answer 1

var pressed = false; 
var start, startX, startWidth; 

$$("table th").invoke('observe', 'mousedown', function(e) { 
    start = $(this); 
    pressed = true; 
    startX = e.pageX; 
    startWidth = start.getWidth(); 
    start.addClassName("resizing"); 
}); 

document.observe('mousemove', function(e) { 
    if(pressed) { 
     start.setStyle({width: startWidth+(e.pageX-startX) + 'px'}); 
    } 
}); 

document.observe('mouseup', function() { 
    if(pressed) { 
     start.removeClassName("resizing"); 
     pressed = false; 
    } 
}); 

これはプロトタイプが最初にあったことを認識することが重要だ、と彼らは彼らをデザインするときにjQueryは、そのAPIを合理化。また、jQueryは "キャリア"クラスのすべてを処理するので、Prototypeは永続的に拡張された要素を持っていますが、$(this)を何度も何度もやり続ける必要があります。 $('some_id')を実行すると、その要素にはPrototypeのすべての追加機能が利用できます。