Question

我正在尝试使用protoype 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;
    }
});

重要的是要意识到Prototype首先存在，并且jQuery在设计它们时简化了它的API。此外，由于jQuery使用“运营商”类完成所有操作，因此您必须反复执行$(this)，而Prototype会永久扩展元素。完成$('some_id')之后，该元素就可以使用Prototype的所有附加功能。

原型js使表可调整大小的列

1 个答案: