[dHTML] probleem met attachEvent en eigen method

[r0bert]

Edit; Probleem nr 3:

.. hoe kan ik tijdens het draggen van een element, het element opvragen wat onder het element zit wat ik op dat moment aan het draggen ben (dus via onmouseover event?) ?

Ik dacht het zo op te lossen:

JavaScript:

 this.element.setActive    = function()
{
    gblActive = fnFindParentElement(event.srcElement, 'DIV');
}
this.element.setInactive= function()
{
    //gblActive = null;
} 

Maar nu krijg ik dus de hele tijd het element wat ik aan het draggen ben, ik denk omdat dat recht onder mijn muis zit (absolute gepositioneerd) maar ik moet dus het element hebben dat daarachter zit.. enig idee ?

(

JavaScript:

    
this.element.attachEvent('onmouseover', this.element.setActive);
this.element.attachEvent('onmouseout', this.element.setInactive);

)

Originele post:
Ik ondervind een probleempje met het attachen van events met daarbij de functies die uit moeten worden gevoert.

this.element is een DIV gecreeërd door middel van createElement:

JavaScript:

this.element.setActive = function()
      { alert('Active: ' + this.id'); }
this.element.attachEvent('onmouseover', this.setActive);

Dit zou toch gewoon moeten werken ? Dat doet het in ieder geval niet. Iemand enig idee hoe ik dit op kan lossen ?

Edit
Ik heb de functie setActive nu onderdeel gemaakt van this en dus niet langer van element. Nu lijkt het wel te werken. Schijnbaar wordt er dus gekeken naar welke functie er wordt verwezen bij het attachen en niet wanneer het event gefired wordt Want bij het attachen verwijst this naar het object, maar als het event gefired wordt, lijkt mij dat naar this.element te moeten wijzen Nouja, het werkt.. daar gaat het grotendeels om

Edit 2
Nog een probleempje:

Hoe roep ik mijn style van mijn element aan vanuit de functie:

JavaScript:

this.setActive = function()
      { alert('BGCOLOR: ' + this.element.style.backgroundColor'); }
this.element.attachEvent('onmouseover', this.setActive);

zeg maar, maar dan werkend.

[ Voor 87% gewijzigd door r0bert op 23-01-2003 22:42 . Reden: update ]

[dominic]

this.element?

Kun je niet gewoon this.attachEvent en this.setActive gebruiken?

Anyway, attachEvent moet naar een procedurenaam wijzen.

Dus: attachEvent(systemeventname, eigenfunctienaam)

[ Voor 17% gewijzigd door dominic op 22-01-2003 18:03 ]

[r0bert]

Nog een probleempje:

Hoe roep ik mijn style van mijn element aan vanuit de functie:

JavaScript:

this.setActive = function()
      { alert('BGCOLOR: ' + this.element.style.backgroundColor'); }
this.element.attachEvent('onmouseover', this.setActive);

zeg maar, maar dan werkend.

[dominic]

Gewoon this.style.background = "#FFFFFF" oid

Laat dat element nou es weg man

[Verwijderd]

r0bert doet dat hetzelfde als ik eens heb gedaan. In een object een property maken dat naar het DOM element verwijst. Daar is niets mis mee. Je moet je alleen wel realiseren dat een klik of event op dat DOM element, de methode aanroept, in zijn eigen scope. Het keyword this zal dus op het DOM element slaan.

Ik heb attachEvent zelf trouwens nog nooit gebruikt, omdat het volgende ook prima voldoet:

this.element.onmouseover = this.setActive;

Op de manier van r0bert krijg je dan een probleem: die methode is gedefinieert voor het obejct dat het element als property heeft. Je zult dus ok die methode setActive een methode van het element moeten maken, of je moet het element een property geven dat naar zijn 'parent object' verwijst:

this.element.parentObject = this;

De aanroep wordt dan als volgt:

this.element.onmouseover = this.parentObject.setActive;

[dominic]

Verwijderd schreef op 22 januari 2003 @ 18:28:
..
Ik heb attachEvent zelf trouwens nog nooit gebruikt, omdat het volgende ook prima voldoet:

this.element.onmouseover = this.setActive;
..

Dit werkt niet altijd. In sommige gevallen wordt hiermee de betreffende system event getrashed voordat er een waarde ingezet wordt. Waardoor je hem daarna wel opnieuw kan vullen maar het event niet meer fired.. Erg mee oppassen dus.

[Verwijderd]

dominic schreef op 22 January 2003 @ 18:33:

Dit werkt niet altijd. In sommige gevallen wordt hiermee de betreffende system event getrashed voordat er een waarde ingezet wordt. Waardoor je hem daarna wel opnieuw kan vullen maar het event niet meer fired.. Erg mee oppassen dus.

Ik heb hier zelf nog nooit last van gehad, en als het zo zou zijn, dan is het een bug, lijkt me. Maar ik zal het in ieder geval onthouden voor als ik rare dingen meemaak

[Clay]

't is wat propaganda achtig maar wat ik in beehive gedaan heb is die attachEvent zelf inbouwen in het object dat de layer vertegenwoordigt (en ook moveTo, setVisible e.d.) en dus niet die ingebouwse attachEvent gebruiken.
De functie die je meegeeft wordt dan wel met de scope op het window uitgevoerd, maar omdat die events via een centraal punt gaan is er 1 globale var (activeObj) die op het moment van zo'n muisevent het naar het object verwijst wat de layer vertegenwoordigt waar je op muisde. Dat zou pas fout gaan als je meer dan 1 muispointer zou hebben, en dat hebben er niet zo veel.
En zo kan je dat ook zo bouwen dat je niet 1, maar oneindig veel mouseover, mousedowns, enz. kan koppelen aan 1 layer, en dat is handig

[r0bert]

Clay schreef op 22 januari 2003 @ 20:53:
(..) die attachEvent zelf inbouwen in het object dat de layer vertegenwoordigt (en ook moveTo, setVisible e.d.) en dus niet die ingebouwse attachEvent gebruiken. (..)

Heb je ook een voorbeeldje bij de hand toevallig ? Want ik heb geprobeerd te begrijpen wat je hebt getypt, maar sommige stukjes zijn toch niet helemaal duidelijk naar mij toe, hoe ik dat zou moeten fixen

[Clay]

Tuurlijk. demo

Werkt overigens (bewust) niet in ns4. Verder dacht ik vrijwel overal op. Move je muis over dat rode vlak met "test test test" erin, en bekijk daarna de code.

[r0bert]

Jemug .. ! Hoe lang ben je er wel niet mee bezig geweest om dat goed werkend te krijgen Ziet er erg uit! Thanks! Ik ga nog eventjes verder met prutsen, als ik nog problemen tegen kom, meld ik me wel weer

[r0bert]

Ok, problemo 3:

Hoe kan ik tijdens het draggen van een element, het element opvragen wat onder het element zit wat ik op dat moment aan het draggen ben (dus via onmouseover event) ?

Ik dacht het zo op te lossen:

JavaScript:

this.element.setActive  = function()
{
    gblActive = fnFindParentElement(event.srcElement, 'DIV');
}
this.element.setInactive= function()
{
    //gblActive = null;
}

Maar nu krijg ik dus de hele tijd het element wat ik aan het draggen ben, ik denk omdat dat recht onder mijn muis zit (absolute gepositioneerd) maar ik moet dus het element hebben dat daarachter zit.. enig idee ?

JavaScript:

    
this.element.attachEvent('onmouseover', this.element.setActive);
this.element.attachEvent('onmouseout', this.element.setInactive);

[ Voor 13% gewijzigd door r0bert op 23-01-2003 21:30 ]

[Clay]

r0bert schreef op 23 January 2003 @ 15:31:
Jemug .. ! Hoe lang ben je er wel niet mee bezig geweest om dat goed werkend te krijgen Ziet er erg uit! Thanks! Ik ga nog eventjes verder met prutsen, als ik nog problemen tegen kom, meld ik me wel weer

Mwah dat ging wel vlug, maar voor ik op het idee was gekomen het zo te doen was ik wel weer een half jaar verder

r0bert schreef op 23 January 2003 @ 21:27:
Hoe kan ik tijdens het draggen van een element, het element opvragen wat onder het element zit wat ik op dat moment aan het draggen ben (dus via onmouseover event) ?

Ik dacht het zo op te lossen:
*knip
Maar nu krijg ik dus de hele tijd het element wat ik aan het draggen ben, ik denk omdat dat recht onder mijn muis zit (absolute gepositioneerd) maar ik moet dus het element hebben dat daarachter zit.. enig idee ?

Ik weet eigenlijk niet of dit wel kan ? je muis zit er gewoon niet echt op, en die absolute gesleepte heeft eigenlijk geen relatie met die eronder, dus de enige manier die overblijft lijkt mij een boundingbox check. gewoon of die er met coordinaten en dimensies in zit. Dat zal alleen wel kut worden als dat een relative geplaatst element is denk ik.

Check anders ff hoe dat bij vermaakme.nl is gedaan, of roep om Blues

[dominic]

Verwijderd schreef op 22 January 2003 @ 18:36:

[...]

Ik heb hier zelf nog nooit last van gehad, en als het zo zou zijn, dan is het een bug, lijkt me. Maar ik zal het in ieder geval onthouden voor als ik rare dingen meemaak

Cheatah je hebt gelijk, ik heb het nog ff nagekeken met een stuk code waar ik er last van had en het schijnt alleen te gebeuren in IE.

[r0bert]

Ok, * r0bert roept om Blues en ik zal de bron ook even checken van die site..

Maar als ik nou bijvoorbeeld dat element wat ik meedrag, 10 pixels rechts van de muispointer zou laten verschijnen .. Wordt de onmouseover dan nog steeds op het element wat ik aan het draggen uitgevoerd ?
*zal het natuurlijk zelf ook wel even testen*

* r0bert heeft na een half uur kloten eindelijk de code die op 1 regel stond gepropt, duidelijk overzichtelijk verspreidt over zijn documentje toch wel effectief om het stelen van je scriptje tegen te gaan
[edit] Ohw oeps.. ik heb nog niet eens een tiende gehad geloof ik allemejezus!

[ Voor 33% gewijzigd door r0bert op 24-01-2003 10:15 ]

[r0bert]

Er is toch wel iemand die weet hoe ik het element onder het element uit kan lezen waar de onmouseover op gefired wordt ?

Ik kan wel wat hulp gebruiken want kom er echt niet uit!

[Verwijderd]

r0bert schreef op 24 januari 2003 @ 09:45:
Ok, * r0bert roept om Blues en ik zal de bron ook even checken van die site..

Beter laat dan nooit, zullen we maar zeggen....

Maar als ik nou bijvoorbeeld dat element wat ik meedrag, 10 pixels rechts van de muispointer zou laten verschijnen .. Wordt de onmouseover dan nog steeds op het element wat ik aan het draggen uitgevoerd ?
*zal het natuurlijk zelf ook wel even testen*

Mij lijkt van niet.

Wat jij wil (het element opvragen waar je op dat moment iets overheen dragt) is niet zo een-twee-drie gefixt. Op vermaakme wordt de interface gegenereerd uit een dataset die een aantal verschillende typen componenten definieert. Sommige van die componenten zijn zogenaamde 'recievers' en als je aan het draggen bent zit er eigenlijk bijna niks anders op dan (een beetje intelligent, dat wel) je recievers af te gaan om te kijken of je erbinnen hangt, of niet.

Dit lijkt misschien wat omslachtig, maar is in feite zo gebeurd. Ik heb op deze manier verschillende interfaces gebouwd en ben nooit performance-problemen tegengekomen.

In je drag-functie zit dus gewoon een loopje dat door je 'recievers' heen loopt en checkt of je erboven hangt of niet...

edit:

FF een heel snel quick'n'dirrrty voorbeeldje
dragtest

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Untitled</title>
</head>
<script type="text/javascript">

var _aDIV;
//--------------------------------
function initall() {
//--------------------------------
    // zet alle DIVs alvast ff in een array
    _aDIV = document.getElementsByTagName('div');
    for(var i=0; i<_aDIV.length; i++) {
        _aDIV[i].id = 'dragDIV' + i;
        // assign event listeners
        _aDIV[i].onmousedown = doMouseDown;
        _aDIV[i].onmouseup = doMouseUp;
    }
    window.onmousemove = doMouseMove;
}

var _oDrag;
//--------------------------------
function doMouseDown() { 
//--------------------------------
    _oDrag = this;
    _oDrag.style.zIndex += 4;
}
//--------------------------------
function doMouseUp() { _oDrag = null; }
//--------------------------------
function doMouseMove(e) {
//--------------------------------
    if(_oDrag != null) {
    self.status = _oDrag.id;
        _oDrag.style.left = (e.clientX-50) + 'px';
        _oDrag.style.top = (e.clientY-25) + 'px';
        for(var i=0; i<_aDIV.length; i++) {
            var oDIV = _aDIV[i];
            if(oDIV !=_oDrag) {
                var iX1 = parseInt(oDIV.offsetLeft);
                var iY1 = parseInt(oDIV.offsetTop);
                var iX2 = parseInt(oDIV.offsetWidth) + iX1;
                var iY2 = parseInt(oDIV.offsetHeight) + iY1;
                if(iX1 < e.clientX && e.clientX < iX2 &&
                    iY1 < e.clientY && e.clientY < iY2) {
                    oDIV.style.backgroundColor = '#FF0000';
                }
                else oDIV.style.backgroundColor = '#FFFF00';
            }
        }
    }
}

</script>
<style type="text/css">
.drag {
    position: absolute;
    left:10px;
    top:10px;
    width:100px;
    height:50px;
    background:#FFFF00;
    padding:10px;
    border:1px solid #000;
}
</style>
<body onload="initall()">

<div class="drag">DRAGDIV 1</div>
<div class="drag">DRAGDIV 2</div>
<div class="drag">DRAGDIV 3</div>
<div class="drag">DRAGDIV 4</div>

</body>
</html>

[ Voor 45% gewijzigd door Verwijderd op 27-01-2003 21:36 ]

[r0bert]

Wowie! Thanks Blues, ik zal er direct mee aan de slag gaan! * r0bert is blues erg dankbaar

Ik had het intussentijd opgelost door het ondrop event, waar ik op gewezen werd door een bekend. Icm met de andere events (ondragstart, ondrag, ondragover, ondragend) Is daar een prachtig werkend drop en drag scriptje van te maken. (was te vinden op javascript.com geloof ik, genaamd 'dragdropie' oid)

Maar ik ga eens even kijken wat beter werkt, ook lettend op de functies die er in de toekomst nog bij zullen komen..

Thanx!