Prototype js make table resizable column

Question

Я пытаюсь сделать таблицы столбцами, изменяемыми по размеру, используя protoype js, нашел решение с использованием jquery here, но как достичь того же, используя прототип js framework?

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; 
     } 
    }); 

Я попробовал то же самое в Prototype:

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 делает все с классом «носитель», вы должны продолжать делать $(this) снова и снова, в то время как Prototype имеет постоянно расширенные элементы. Как только вы сделаете $('some_id'), у этого элемента есть все дополнительные возможности Prototype, доступные для него.