[JS] User tabel kolommen laten resizen

[Verwijderd]

Ik ben bezig met een tabel waarvan de kolommen resizable zijn. (client-side) Zie [rml][ JS] Checken of CTRL ingedrukt is met een onclick event[/rml]
De volgende functies moeten worden geïmplementeerd:

1. Cursor moet zich aanpassen wanneer de gebruiker met de muis over de rand(/dichtbij de rand) van de table header cell <th> gaat, en weer terug naar normaal veranderen wanneer de muis niet dichtbij of over de rand is.
2. Wanneer de cursor veranderd is in bovenstaande situatie moet de gebruiker de kolom kunnen resizen wanneer hij de muis ingedrukt houdt (onmousedown event)

Punt 1 heb ik nu werkend gekregen met de onderstaande code:

JavaScript:

resizableTable.prototype.resizeColumn = function( e, el )
{
    var el = (e) ? e.target : window.event.srcElement;

    var coords = this.getMouseCoords(e);

    var left  = (el.offsetParent.offsetLeft != 0 ? el.offsetParent.offsetLeft : document.body.offsetLeft) +
                el.offsetLeft;
    var width = el.offsetWidth;
    var right = left + width;
    var prev  = el.previousSibling;
    var next  = el.nextSibling;
    var l = coords.mouseX - left;
    var r = right - coords.mouseX;

    if (((l >= 0) && (l <= 10) && (prev)) || ((r >= 0) && (r <= 15))) {
        el.style.cursor = 'e-resize';
        el.width = coords.mouseX - left;
        return true;
    } else if (((r >= 0) && (l >= 5)) && (prev)) {
        el.style.cursor = 'e-resize';
        prev.width = coords.mouseX - left;
        return true;
    }
    return false;
}

// [...]

            // Create resize behaviour
            ths[j].onmousedown = function(e) {
                this.onmousemove = function(e) {
                    self.resizeColumn( e, this );
                    return false;
                }
            }
            // Cancel resize behaviour on mouseup & mouseout events
            ths[j].onmouseup = function(e) {
                this.onmousemove = function(e) {
                    this.style.cursor = 'default';
                    return false;
                }
            }

// [...]

Nou loop ik tegen de volgende problemen aan:

• Als ik sleep en buiten de <th> kom kan de gebruiker niet meer resizen (de events van de <th> die gesleept werd vervallen namelijk omdat de muis niet meer boven dit element zit)
• Als ik te snel sleep gebeurt er hetzelfde als hierboven...

Hoe zou ik dit op kunnen lossen? Heeft iemand misschien een goeie tutorial over event bubbling, ik denk namelijk dat mijn gebrek aan kennis daarvan de oorzaak is van de problemen waar ik tegenaan loop...

Thanks!

[ Voor 3% gewijzigd door Verwijderd op 29-08-2005 11:23 ]

[BtM909]

Heb je deze al gelezen: http://www.quirksmode.org/js/events_order.html?

(rechtsboven even op frameset klikken )

[Verwijderd]

BtM909 schreef op maandag 29 augustus 2005 @ 11:03:
Heb je deze al gelezen: http://www.quirksmode.org/js/events_order.html?

(rechtsboven even op frameset klikken )

Yep, heb ik een tijdje gelezen doorgelezen, het moet alleen nog even dagen geloof ik. Meestal begin ik die dingen een beetje te vatten als ik ze in de praktijk kan gebruiken (i.p.v. theorie).

[Verwijderd]

Verwijderd schreef op maandag 29 augustus 2005 @ 10:33:
Nou loop ik tegen de volgende problemen aan:

• Als ik sleep en buiten de <th> kom kan de gebruiker niet meer resizen (de events van de <th> die gesleept werd vervallen namelijk omdat de muis niet meer boven dit element zit)
• Als ik te snel sleep gebeurt er hetzelfde als hierboven...

Hoe zou ik dit op kunnen lossen?

Ik zou de resize events geen event van de TH's laten zijn, precies om deze problemen te voorkomen. Ik denk dat het handiger is om een globale mousemove event handler te hebben waarin je het resizen afhandelt.

code:

// Will hold pointer to object being resized
var _oResizing = null; 

// TH mousedown handler
function th_onmouseDown() {
    _oResizing = this;
}

// Global mouseup handler
function global_onmouseUp() {
    _oResizing = null;
}

// Global mousemove handler
function global_onmouseMove() {
    if(_oResizing != null) {
         // doe iets met _oResizing
    }
}

[Verwijderd]

Verwijderd schreef op maandag 29 augustus 2005 @ 11:42:
[...]

Ik zou de resize events geen event van de TH's laten zijn, precies om deze problemen te voorkomen. Ik denk dat het handiger is om een globale mousemove event handler te hebben waarin je het resizen afhandelt.

[...]

Thanks, ik ga dat even proberen. Nou zat ik te denken; ik wil dit als een soort component maken die ik kan gebruiken in andere applicaties. Is zo'n globale event dan wel handig? Is dit de enige manier?