Prototyp js make Tabelle veränderbare Spalte

Question

Ich versuche, Tabellenspalten resizeable mit Protoype js zu machen, fand eine Lösung mit jquery here, aber wie man das selbe mit Prototyp js Rahmen erreichen?

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

ich in Prototype gleiche versucht:

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

Breite zunimmt, aber nicht richtig. kann jemand vorschlagen, was das Problem ist?

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

Es ist wichtig zu erkennen, dass Prototype war zuerst da, und jQuery rationalisiert seine API, wenn sie ihre entworfen. Da jQuery alles mit einer "Carrier" -Klasse macht, müssen Sie immer wieder $(this) machen, während Prototype Elemente permanent erweitert hat. Sobald Sie $('some_id') tun, hat dieses Element alle Extras von Prototype zur Verfügung.