Prototype js 使 table 可调整大小的列

Question

我正在尝试使用 protoype js 使 table 列可调整大小，找到了使用 jquery here 的解决方案，但是如何使用 protoype 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;
    }
});

重要的是要意识到 Prototype 最先出现，并且 jQuery 在设计他们的原型时简化了它的 API。此外，由于 jQuery 用 "carrier" class 做所有事情，你必须一遍又一遍地做 $(this)，而 Prototype 具有永久扩展元素。一旦你这样做 $('some_id')，该元素就拥有了 Prototype 的所有额外功能。

Prototype js 使 table 可调整大小的列

Prototype js make table resizable column

javascript

html

prototypejs