[JS]drag & drop navigator

[Verwijderd]

Ik heb me d'r al suf zitten op zoeken en al verschillende scripts bestudeerd waar het wel naadloos werkt, maar ik vind maar geen mogelijke oorzaak waarom het niet soepel loopt.

Ik heb dus een soort "navigator" (als bij photoshop) om te navigeren op een grote prent.
Online voorbeeld staat hier: http://www.joggink.be/snippets/js/navigator/

Het probleem is dat het in Iexplorer heel soepel versleepbaar is, maar in Firefox hapert hij en flikkert hij, net of de positie van de cursor telkens verspringt naar rare posities. Bij het verslepen verplaatst de div zich net iets trager dan de cursor.

Javascript code:

JavaScript:

// START TEST
if(!window.event && window.captureEvents) {
  window.captureEvents(Event.MOUSEMOVE|Event.MOUSEOVER|Event.MOUSEOUT|Event.CLICK|Event.DBLCLICK|Event.ONMOUSEDOWN);
  window.onmouseover = WM_getCursorHandler;
  window.onmouseout = WM_getCursorHandler;
  window.onclick = WM_getCursorHandler;
  window.ondblclick = WM_getCursorHandler;
  window.onmousedown = WM_getCursorHandler;
  window.onmousemove = WM_getCursorHandler;
  window.event = new Object;
}


function WM_getCursorHandler(e) {
  window.event.clientX = e.pageX;
  window.event.clientY = e.pageY;
  window.event.x = e.layerX;
  window.event.y = e.layerY;
  window.event.screenX = e.screenX;
  window.event.screenY = e.screenY;
  if ( routeEvent(e) == false ) {
    return false;
  } else {
    return true;
  }
}

// EINDE TEST

var start_x = 0;
var start_y = 0;

function start_cursor_trace(){
    start_x = event.x;
    start_y = event.y;
    document.onmousemove = trace_cpos;
}

function stop_cursor_trace(){
    document.onmousemove = "";
}

function trace_cpos(){

    var mouse_x = event.x - start_x;
    var mouse_y = event.y - start_y;

    document.getElementById('x').value = event.x;
    document.getElementById('y').value = event.y;   

    start_x = event.x;
    start_y = event.y;

    var selector = document.getElementById('selection');
    var new_x = selector.offsetLeft + mouse_x;
    var new_y = selector.offsetTop + mouse_y;

    pos_right = new_x + 150;
    pos_bottom = new_y + 50;

//  window.alert(pos_top + "-" + pos_left + "-" + pos_top2 + "-" + pos_left2);
//  
    if (new_y >= 5){// || (pos_left > 799) || (pos_top2 < 166) || (pos_left2 < 1001)){
       if (new_x >= 800){
          if (pos_right <= 1000){
             if (pos_bottom <= 165){
                document.getElementById('selection').style.position = "absolute";
                document.getElementById('selection').style.top = new_y + "px";
                document.getElementById('selection').style.left = new_x + "px";
                bg_x = new_x * -5;
                bg_y = (new_y - 5) * -5;
                document.getElementById('map').style.backgroundPosition = bg_x + "px " + bg_y + "px";
             }
          }
        }
    }

}

Heeft iemand enig idee aan wat het zou kunnen liggen? Ik verwacht niet dat jullie met een kant-en-klare oplossing afkomen want daar leer ik zelf niets van bij (en dat doen jullie zoiezo niet) maar een duwtje in de rug die me kan helpen het probleem specifieker te vinden zou wel welkom zijn.

[Verwijderd]

In IE loopt die trouwens ook nog niet helemaal lekker. De linker afbeelding wordt een grijs vlak dit komt volgens mijn omdat de afbeelding nog aan het laden is.

Heeft het probleem hier niet mee te maken? Dat het plaatje telkens opnieuw geladen wordt?

[ Voor 8% gewijzigd door Verwijderd op 30-05-2006 10:26 ]

[djluc]

Je kan sowieso je objecten ergens cachen: Dus niet constant getElementById doen maar die ergens opslaan. Nu moet je elke keer in de DOM het juiste element opzoeken wat niet optimaal is.

[Verwijderd]

Normaal moet hij die afbeelding niet laden want hij staat als background. Ik pas enkel de positie van m'n background aan.

Ik zal straks eens proberen of het lukt als ik m'n object cache.

[Verwijderd]

Verwijderd schreef op dinsdag 30 mei 2006 @ 12:40:
Normaal moet hij die afbeelding niet laden want hij staat als background. Ik pas enkel de positie van m'n background aan.

Ik zal straks eens proberen of het lukt als ik m'n object cache.

Toch raar, in IE wordt de afbeelding wel telkens gedownload in FF gebeurt dit niet. Als ik in IE het sleep met het vlak wordt de afbeelding map.jpg telkens gedownload.

[beetle71]

Toch raar, in IE wordt de afbeelding wel telkens gedownload in FF gebeurt dit niet. Als ik in IE het sleep met het vlak wordt de afbeelding map.jpg telkens gedownload.

Dit ligt aan de instelling van je IE. als je bij 'Temporary Internet Files'>'Settings' het vinkje bij 'Every vist to the page' hebt staan gaat ie steeds herladen.

Dit probleem duikt ALLEEN op met achtergrondplaatjes en CSS, als je met een normale <IMG> gaat schuiven heb je er geen last van....

[Verwijderd]

beetle71 schreef op dinsdag 30 mei 2006 @ 13:25:
[...]


Dit ligt aan de instelling van je IE. als je bij 'Temporary Internet Files'>'Settings' het vinkje bij 'Every vist to the page' hebt staan gaat ie steeds herladen.

Dit probleem duikt ALLEEN op met achtergrondplaatjes en CSS, als je met een normale <IMG> gaat schuiven heb je er geen last van....

Klopt, ik heb het even geprobeerd

[Verwijderd]

Damn, dan heb ik wel een probleem, want die prent moet kunnen verschoven worden in een specifieke div in het design...

Een ander oplossing heb ik niet direct voor ogen...


Edit:
Maar in firefox trilt m'n roze selectordiv ook als ik hem versleep

[ Voor 20% gewijzigd door Verwijderd op 30-05-2006 17:21 ]

[djluc]

Gewoon overflow: hidden geven?

[Verwijderd]

maar als ik dan m'n image relatief positioneer in m'n div, en hij gaat negatief (top of left) dan komt hij toch uit m'n div?

Ik test het even...

[djluc]

Geef je omliggende div een position: relative; en je img een position: absolute; Dan kan je die img absoluut positioneren ten opzichte van de div.

[Verwijderd]

Hm, probleem is dat m'n div een absolute positionering nodig heeft...

[Verwijderd]

Wtf?

Vroeger stopte ik de cursortrace (en dus ook de beweging van m'n background) bij onmouseout van m'n click 'n' drag div. Ik heb dat er nu uitgesloopt, zodat je met je muis kan slepen en dat je hem zelfs kan verplaatsen zonder dat je er nog bovenhangt met je muis. (je moet het maar eens proberen, sleep gewoon onmiddelijk je muis naar links uit de thumbnail en beweeg je muis over het scherm)

Wat blijkt in firefox, dat als je met je muis boven de geselecteerde div blijft dat hij "trilt" en als je met je muis de selection div verplaatst maar niet erboven hangt met je muist hij vloeiend da background beweegt...

Strange...

De link: http://www.joggink.be/snippets/js/navigator/
javascript: http://www.joggink.be/snippets/js/navigator/nav.js

[ Voor 13% gewijzigd door Verwijderd op 31-05-2006 01:31 ]

[funkwurm]

Verwijderd schreef op woensdag 31 mei 2006 @ 01:27:
Wtf?

Vroeger stopte ik de cursortrace (en dus ook de beweging van m'n background) bij onmouseout van m'n click 'n' drag div. Ik heb dat er nu uitgesloopt, zodat je met je muis kan slepen en dat je hem zelfs kan verplaatsen zonder dat je er nog bovenhangt met je muis. (je moet het maar eens proberen, sleep gewoon onmiddelijk je muis naar links uit de thumbnail en beweeg je muis over het scherm)

Wat blijkt in firefox, dat als je met je muis boven de geselecteerde div blijft dat hij "trilt" en als je met je muis de selection div verplaatst maar niet erboven hangt met je muist hij vloeiend da background beweegt...

Strange...

De link: http://www.joggink.be/snippets/js/navigator/
javascript: http://www.joggink.be/snippets/js/navigator/nav.js

Dit gebeurde mij ook in Firefox, en ik denk dat dat erop duidt dat je teveel eventbubbling doet. Je laat dus teveel gebeuren bij onmouseover, onmouseout, onmousemove, enz.

Zodra je muis namelijk (zoals je beschrijft) "boven" het sleepbare vierkantje komt, treedt er geen onmouseover of onmouseout meer op, en gaat het soepel.

Persoonlijk zou ik ook niet weten wat je met onmouseover en onmouseout moet, onmousemove is genoeg. Bij een onmousedown kijk je wat de coordinaten zijn van de muis ten opzichte van het vierkantje, bij elke onmousemove verandere je de coordinaten van het blokje zo dat het hetzelfde blijft ten opzichte van de muis, en bij de onmouseup hou je daar weer mee op. Klaar.

(tussen 2 haakjes, ik heb je script niet heel goed bekeken, maar ik denk dat hier je probleem ligt)

[Verwijderd]

Het vreemde is dat als ik hem in firefox versleep met m'n muis niet boven m'n selector het vloeiend gebeurt, als ik echter met m'n muis terug op m'n selector kom springt m'n selector terug naar de (0,0) coördinaten (zijnde de linkerbovenhoek van m'n miniplan div). Dus als ik hem versleep met m'n muis boven m'n selector springt hij telkens naar coords 0,0 en dan terug naar de juiste coördinaten


@funkwurm: op m'n div is er enkel een actie mij "onmousedown" de onmousup en onmousemove zijn op m'n document.

[ Voor 19% gewijzigd door Verwijderd op 01-06-2006 00:52 ]

[storeman]

Ik ben zelf ook bezig met drag en drop in JS, ik heb er echter geen last van, alleen het probleem in jouw code kan ik niet echt vinden.

Ik heb alles in objecten gemaakt, dat kan natuurlijk schelen. En inderdaad, probeer te voorkomen dat getElementById elke keer opnieuw aangeroepen moet worden.

Ook bij elke gebeurtenis worden er veel te veel gegevens opgeslagen. Kijk eens naar je CPU belasting als je dit soort geintjes doet, volgens mij wordt je daar niet echt blij van.

Mijn beste gok is de getElbyID, gewoon in een variabele zetten, als je meer tijd hebt, maak er een objectje van.

ps. mijn projectje: http://www.storeman.nl/jsProjects/mouseObj.php

[storeman]

@funkwurm: op m'n div is er enkel een actie mij "onmousedown" de onmousup en onmousemove zijn op m'n document.

Echter hang je ze wel allemaal aan het window, wat daar het effect van is kan ik me niet zo 1,2,3 bedenken, maar waarom? Je slaat op die manier wel heel veel op per event.

[storeman]

Ben even bezig geweest,

JavaScript:

var oSel = '';
var start_x = 0;
var start_y = 0;

window.onload = function()
{
    oSel = document.getElementById('selection');
    oSel.onmousedown = start_cursor_trace;
}

function start_cursor_trace(e){
    var e = e ? e : event;
    start_x = e.clientX || e.pageX;
    start_y = e.clientY || e.pageY;
    document.onmousemove = trace_cpos;
    document.onmouseup = stop_cursor_trace;
}

function stop_cursor_trace(e){
    document.onmousemove = "";
}

function trace_cpos(e){

    var e = e ? e : event;
    
    var mouse_x = (e.x || e.clientX) - start_x;
    var mouse_y = (e.y || e.clientY) - start_y;

    start_x = e.clientX || e.pageX;
    start_y = e.clientY || e.pageY;

    var new_x = oSel.offsetLeft + mouse_x;
    var new_y = oSel.offsetTop + mouse_y;

    pos_right = new_x + 150;
    pos_bottom = new_y + 50;

//  window.alert(pos_top + "-" + pos_left + "-" + pos_top2 + "-" + pos_left2);
//  
    if (new_y >= 5){// || (pos_left > 799) || (pos_top2 < 166) || (pos_left2 < 1001)){
       if (new_x >= 800){
          if (pos_right <= 1000){
             if (pos_bottom <= 165){
                oSel.style.position = "absolute";
                oSel.style.top = new_y + "px";
                oSel.style.left = new_x + "px";
                bg_x = new_x * -5;
                bg_y = (new_y - 5) * -5;
                document.getElementById('map').style.backgroundPosition = bg_x + "px " + bg_y + "px";
             }
          }
        }
    }

}

Werkt perfect in FF, het probleem was de bepaling van de muispositie, firefox pikte dit op als de positie in het object, als dat object ook verschuift, wordt het weer anders, dat was dus zegmaar het probleem. Je moet de positie van de muis in het document bepalen, dan werkt het vlekkeloos!

Echter zal je nog wel wat aan de positiebepaling moeten doen, als je buiten het window komt begint ie al te schuiven, niet precies wat je wilt, maar dat is wel op te lossen, dacht ik zo.

[ Voor 27% gewijzigd door storeman op 01-06-2006 11:40 ]

[Verwijderd]

Woohoow! Je bent een schat!