Incorrecte coordinaten in FireFox, workarounds? - Softwareontwikkeling

zondag 27 februari 2005 00:40

Acties:

Verwijderd

Topicstarter

Ik heb twee iframes, waarbij in frame 1 een element beschikbaar is genaamd dragNode. Dit element wil ik net als in iframe 1 kunnen drag & droppen in iframe 2. Ik ga dus drag n drop doen over meerdere iframes.

Om het element ook in iframe 2 te kunnen draggen moet er in de pagina van dat iframe actief worden meegewerkt aan het doorgeven van posities. In iframe 1 is er een mousemove event die het element verplaatst, en in iframe 2 is er een soortgelijk event voor het draggen.

PHP:

document.onmousemove = function(e){
if (!e){e=event}
var x = e.clientX;
var y = e.clientY; 

var el = parent.document.getElementById('dragNode');
  if(el){
    el.style.top = y;
    el.style.left = x+add;
  }
}

Het geval wil nu zijn dat in IE dit uitstekend werkt, maar in FireFox 1.0 en 1.01 de browser de juiste clientX en de juiste clientY niet terug geeft zodra er een onmousedown event is afgevuurd maar nog geen onmouseup (dragging state dus). Wat FireFox schijnt terug te geven is screenX en screenY, kortom de afstand tot de linkerbovenhoek van je beeldscherm.

Als ik gewoon een mousemove event invoke in frame 2 krijg ik wel de normale clientX en clientY variabelen terug.

Is er iemand die hiervoor een workaround weet? Dit lijkt me namelijk een bug.

zondag 27 februari 2005 12:54

Acties:

SiliconError

:(){ :|:& };:

Ik kan me niet zo goed voorstellen wat er nou precies de bedoeling is en wat er precies misgaat.
Heb je misschien een voorbeeld online staan?

PS: Misschien heb je wat aan de moveWindow en grabWindow functies uit de javascript van mijn website. Ze zijn waarschijnlijk niet echt optimaal maar misschien een bron van inspiratie

zondag 27 februari 2005 13:50

Acties:

André

Analytics dude

En als je nou pageX gebruikt ipv clientX?

zondag 27 februari 2005 19:31

Acties:

Verwijderd

Topicstarter

Stel je een pagina voor die eruit ziet als windows explorer. Waarbij de listview een iframe is, en de treeview in de pagina zelf zit.

Nu ga ik vanuit de treeview een element slepen naar de listview, ik ga dus vanuit de pagina de iframe in en daar neemt de iframe het besturen van het te draggen element over aangezien pagina geen mousover events meer krijgt zodra ik in de iframe zit.

Ik selecteer dus een node in de treeview, mousedown zorgt ervoor dat het element draggable wordt, en een mousemove listener wordt gecreerd. Vanaf dit moment wordt het element door de mousemove listener verplaatst.

Dit gebeurt totdat de muiscursor in het listview gedeelte komt, want de pagina krijgt dan geen events meer door van een mousemove (die vind immers plaats in de iframe) dus de iframe gaat die taak over nemen (zie script) door het element te verplaatsen.

Deze mousemove in het iframe geeft netjes de coordinaten terug tov de linkerbovenhoek van het iframe als je zonder een actieve drag n drop gewoon de waarden opvraagt tijdens een mousemove.

Dit verandert echter als ik in een mousemove actief ben, dus mousedown in de pagina. Zodra ik in de iframe terecht kom tijdens mijn drag actie is de clientX en de clientY niet meer afhankelijk van de linkerbovenhoek van het iframe, maar tot de linkerbovenhoek van beeldscherm.

Helpt dit?

zondag 27 februari 2005 19:43

Acties:

Verwijderd

el.style.top = y; -> el.style.top = y+'px';

het lijkt me sterk dat dit de problemen veroorzaakt, maar het is iig fout, het lijkt me ook sterk dat het geen problemen veroorzaakt iig (in ff)

zondag 27 februari 2005 20:08

Acties:

crisp

Devver

Pixelated

Testcase:

mainwindow

HTML:

<html>
<head>
<style type="text/css">

iframe {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 100px;
    left: 100px;
}

#dragNode {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -2-px;
    left: -20px;
    background-color: lime;
}

</style>
<script type="text/javascript">

function showcords(e)
{
    if (!e) e=event;
    var x = e.clientX;
    var y = e.clientY;

    showstatus(x,y);
}

var dragger = null;
function showstatus(x,y)
{
    window.status = 'X: ' + x + ', Y: ' + y;

    if (dragger == null) dragger = document.getElementById('dragNode');

    dragger.style.left = x + 'px';
    dragger.style.top = y + 'px';
}

document.onmousemove = showcords;

</script>
</head>
<body>

<iframe src="iframe.html"></iframe>

<div id="dragNode"></div>

</body>
</html>

iframe

HTML:

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

function showcords(e)
{
    if (!e) e=event;
    var x = e.clientX;
    var y = e.clientY;

    parent.showstatus(x,y);
}

document.onmousemove = showcords;

</script>
</head>
<body>

</body>
</html>

Wat me opvalt is dat niet altijd de onmousemove in het iframe het over lijkt te nemen. Dat wordt nog duidelijker als je de onmousemove in het iframe helemaal uitschakeld: het is zowel in IE als in Firefox dan af en toe gewoon mogelijk het blokje over het iframe heen te blijven bewegen, dus de mousemove in het mainwindow blijft dan aktief, maar soms houd die er ook mee op.
Ik zie echter niet echt verschillen in behaviour tussen IE en Firefox in deze. Het is duidelijk dat op het moment dat de onmousemove in het iframe het overneemt je zal moeten compenseren voor de offset van dat iframe binnen je mainwindow.
Als ik namelijk in iframe.html het volgende doe:

JavaScript:

1	parent.showstatus(x+100,y+100);

dan maakt het geen verschil meer (afgezien van een klein sprongetje omdat ik de border van de iframe niet meereken).

[ Voor 7% gewijzigd door crisp op 27-02-2005 20:17 ]

Intentionally left blank

zondag 27 februari 2005 20:14

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 27 februari 2005 @ 19:43:
el.style.top = y; -> el.style.top = y+'px';

het lijkt me sterk dat dit de problemen veroorzaakt, maar het is iig fout, het lijkt me ook sterk dat het geen problemen veroorzaakt iig (in ff)

Die had ik al voorzien van 'px'

En crisp, ik ga jouw testcase even hier uitproberen en modificeren indien nodig om ene voorbeeld t tonen. De mousemove in een iframe wordt pas actief als je buiten het te draggen element komt. Dat element is nog onderdeel van de pagina, en zodoende is de pagina verantwoordelijk voor mousemove events als je binnen het element komt

Wat jij nu hebt gedaan werkt inderdaad, maar je gaat de problemen pas zien zodra je zeg maar een onmousedown event actief hebt.

[ Voor 47% gewijzigd door Verwijderd op 27-02-2005 20:19 ]

zondag 27 februari 2005 20:28

Acties:

crisp

Devver

Pixelated

Kijk inderdaad even of je daar een simpele testcase van kan maken; dan kunnen we er al veel meer mee

Intentionally left blank

zondag 27 februari 2005 20:42

Acties:

Verwijderd

Topicstarter

Ik baal er een beetje van, ik heb nu de testcase gemodificeerd naar een zelfde soort situatie als ik heb en dan werkt het wel

Ik vraag me dus af of mijn layout in Mozilla issues oplevert. Dit is wat ik nu heb gefabriceerd en wel werkt. Op het moment dat je dus je element in de iframe dragged gaat het in mijn andere situatie fout en is de clientX gewoon screenX, idem voor de Y as. Ik snap er niets van

Om even het nodige gepriegel met testcases te besparen, ik heb een working example:
http://mschopman.demon.nl...4/wwwroot/admin/login.cfm

inloggen met user:a en pass:a met de beide select boxes op de default waarden. Dan in het menu links "article" selecteren onder repositories, en een artikel in de treeview naar de listview toe draggen. Onder IE werkt het perfect, onder Mozilla dus niet, je ziet dan ook in de listview debug info verschijnen met de coordinaten.

Dit is de gemodificeerde testcase die WEL werkt

PHP:

<!-- quirks -->
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">

iframe {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index:1;
}

#dragNode {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: lime;
    z-index:2;
}

</style>
<script type="text/javascript">
document.onmousemove = function(e){
    if (!e){e=event}
        
    var x = e.clientX + 10;
    var y = e.clientY + 10; 

    var debug = 'screenX:'+e.screenX+' screenY:'+e.screenY+'<br>';
    debug += 'clientX:'+e.clientX+' clientY:'+e.clientY+'';
    document.getElementById('debug').innerHTML = debug;
        
    if(allowDrag){
        el.style.top = y+'px';
        el.style.left = x+'px';
    }
}

allowDrag = false;
document.onmousedown = function(e){
    allowDrag = true;
    el = document.getElementById('dragNode');
}
document.onmouseup = function(e){
    allowDrag = false;
    el = document.getElementById('dragNode');
}
document.onselectstart = function(){return false};

</script>
</head>
<body>

<div id="debug" style="position:absolute;top:0px;right:0px;"></div>
<div id="dragNode">drag me!</div>
<iframe src="iframe.html"></iframe>



</body>
</html>

PHP:

<!-- quirks -->
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript">

document.onmousemove = function(e){
        if (!e){e=event}
        
        var x = e.clientX + 10;
        var y = e.clientY + 10; 
        
        var el = parent.document.getElementById('dragNode');
        var debug = 'screenX:'+e.screenX+' screenY:'+e.screenY+'<br>';
        debug += 'clientX:'+e.clientX+' clientY:'+e.clientY+'';
        document.getElementById('debug').innerHTML = debug;
        
        if(el){
            el.style.top = y+'px';
            el.style.left = x+'px';
        }
    }

</script>
</head>
<body>

<div id="debug" style="position:absolute;top:0px;right:0px;"></div>
</body>
</html>

[ Voor 13% gewijzigd door Verwijderd op 27-02-2005 20:43 ]

zondag 27 februari 2005 21:19

Acties:

JHS

Splitting the thaum.

offtopic:
Als ik tracht in te loggen met a / a / localhost / localhost - Development krijg je een "session expired"

edit:
nog steeds hoor

. Maar dat kan ook aan mij liggen

.

[ Voor 33% gewijzigd door JHS op 27-02-2005 21:40 ]

DM!

zondag 27 februari 2005 21:22

Acties:

Verwijderd

Topicstarter

Probeer het nog eens, dan is er namelijk een IO cache aangemaakt

Je moet wel op login.cfm inloggen. Ga je via de directory dan krijg je zowiezo direct session expired te zien.

Je ziet direct de coordinaten vreemde vormen aannemen als je de vergelijk trekt tussen puur een onmousemove, en een onmousedown in pagina met daarop volgend een mousemove in de listview.

[ Voor 82% gewijzigd door Verwijderd op 27-02-2005 21:25 ]

zondag 27 februari 2005 22:34

Acties:

crisp

Devver

Pixelated

ok, testcase met probleem duidelijk gemaakt: klikkerdeklik
In iframe1 en iframe2 compenseer ik dus al voor de offsets van de iframes zelf. Je ziet duidelijk dat het in Firefox misgaat op het moment dat iframe2 de handling voor het draggen overneemt.

Als je trouwens de -moz-user-select:none op #dragNode in iframe1 weghaalt, of begint te draggen buiten het groene rechthoekje zie je dat iframe1 de handler blijft.

Ik denk ook dat we het in die -moz-user-select moeten zoeken, ik zie dat jij die ook gebruikt

Edit: ook als ik het event van de mousedown cancel ipv de -moz-user-select hou ik hetzelfde fenomeen.

[ Voor 25% gewijzigd door crisp op 27-02-2005 22:52 ]

Intentionally left blank

zondag 27 februari 2005 23:06

Acties:

Verwijderd

Topicstarter

Had jij het probleem wat ik had in mijn interface gezien in mijn interface ?

We kunnen dus stellen dat dit een bug is in FireFox, weliswaar heel moeilijk te reproduceren maar hij is er

De code die het element echter aanmaakt, (dragdrop.js) is, maar daar gebruik ik die mozilla extension niet voor? Vraag me dus af of het wel daar mee te maken heeft

Je ziet in jouw voorbeeld ook dat FireFox dus gewoon screenX waarden gebruikt voor clientX, heel wazig.

code:

function oNode_dragStart(ref,e){
    var tmp = document.createElement("DIV");
    tmp.innerHTML = ref.oNode.innerHTML;
    tmp.style.position = 'absolute';
    tmp.style.top = oNode_getOffsetTop(ref.oNode)+'px';
    tmp.style.left = oNode_getOffsetLeft(ref.oNode)+'px';
    if(document.all){
        tmp.style.filter='alpha(opacity=70)';
    }else{
        tmp.style.setProperty('-moz-opacity',0.7,'');
    }
    
    tmp.id = 'dragNode';
    document.body.appendChild(tmp);
    //document.body.style.cursor = 'default';
}

[ Voor 119% gewijzigd door Verwijderd op 27-02-2005 23:13 ]

zondag 27 februari 2005 23:31

Acties:

crisp

Devver

Pixelated

De bug is heel simpel: testcase
Als je vanuit het document met je mouse zeg maar linksboven de iframe binnenkomt zie je dat de pageX/clientX en pageY/clientY waarden netjes de lokatie binnen het document in het iframe aangeven (als je dus helemaal in de hoek binnenkomt begin je met X=0 en Y=0).
Hou je nu je muis ingedrukt en doe je hetzelfde dan beginnen X en Y ineens bij 300, terwijl het duidelijk is dat de code in het iframe het event afhandelt.

Dus ja: dit lijkt me duidelijk een bug

Intentionally left blank

zondag 27 februari 2005 23:37

Acties:

Verwijderd

Topicstarter

Dan meld ik hem even aan bij de Mozilla bugtracker met jouw testcase

Meestal worden javascript bugs bij dergelijke basic functionaliteit heel snel gefixed, dus ik heb goede hoop.

https://bugzilla.mozilla.org/show_bug.cgi?id=283996

[ Voor 54% gewijzigd door Verwijderd op 27-02-2005 23:44 ]

maandag 28 februari 2005 00:43

Acties: