Herdefiniëren draggable objects gaat mis.

[1st_Ro]

Goedemorgen,

Ik ben sinds vorige week bezig met een project waarbij de interface zowat compleet AJAX georienteerd is. Nu loop ik alleen tegen een probleem(pje) aan die heel vreemd is en waar ik niet 1 2 3 een oplossing voor zie. Dus ik drop hem even hier!

Situatieschets
De interface bestaat in grote lijnen uit twee onderdelen: Een verzameling foto's en een vlak waar men die foto's kan plaatsen. De foto's zijn draggable. Zodra de foto's worden gedropt op het vlak waar men ze mag plaatsen worden de gegevens netjes opgeslagen (wie hem dropt, welke foto, x en y posities etc.) via AJAX. Na het opslaan worden zowel het vlak als de verzameling foto's ververst via AJAX, omdat men de foto's maar eenmaal mag gebruiken. Vanuit het vlak mogen de foto's ook weer teruggeplaatst worden of verschoven worden in het vlak. Je hebt dus alle vrijheid om alles te doen.

Het probleem
Bij het loslaten van een foto op het vlak wordt alles gereload via AJAX (zowel het vlak als de fotoverzameling). Op één of andere manier kan ik daarna niet meer slepen, tenzij ik een F5 geef.
In het javascript definieer ik ook welke DIVs draggable zijn en het lijkt er op dat door de AJAX reload ik ook de DOM tree herschrijf, waardoor ie de draggable DIVs niet meer pakt.

Misschien heb ik het hier al mis, maar daarom schrijf ik dit dus ook.
Ik heb al wat pogingen gedaan om deze lijst via AJAX ook te verversen, maar tot nu toe geen succes!

Gerelateerde code
1 op 1 gekregen van mijn baas en dus ook zo gebruikt.

JavaScript:

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
@else
    xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        xmlhttp = false;
    }
}

function loadDoc(docname, id) {
    if (xmlhttp) {
        xmlhttp.open("GET",docname,true);
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4) {
                if(document.getElementById(id)) document.getElementById(id).innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.send(null);
    }
    return true;
}

Voor het drag n drop gedeelte maak ik gebruik van de library van Walter Zorn

Heeft iemand een vermoeden waar ik het moet zoeken?
Mocht er nog meer informatie nodig zijn (code, uitleg), dan hoor ik het graag!

[Verwijderd]

Je moet zorgen dat de drag/drop code word geherinitialiseerd wanneer je de inhoud van het document hebt herladen via ajax

[1st_Ro]

_Graphix, wat dan inhoudt dat ik die javascript weer moet laden via AJAX? Hmmm, ik zal 's kijken of ik dat voor elkaar krijg!

[Verwijderd]

Nou nee niet echt, om ff te zien wat je precies moet doen moet je even meer code posten, onder andere de code voor het draggen.

[Copyman]

Koppel je nadat je de DOM tree hebt herschreven de event listeners wel weer aan de dragable elementen? Hebben de dragable elementen wel de juiste classes of eventueel id's?

Zoals _Graphix zegt, we kunnen je beter helpen als je wat meer code plaatst. Met name het deel waar je de DOM tree herschrijft.

[1st_Ro]

Copyman, dat probeer ik dus wel (de event listeners koppelen), maar gezien de tijdsnood kan/kon ik er niet teveel tijd in steken...

Ik heb het nu tijdelijk opgelost met een harde reload (op aanraden van de baas). Dit is voorlopig nog een pilot, dus de echte versie komt later (en dus meer tijd). Ik ga thuis dan 's kijken of ik zoiets los voor elkaar kan krijgen, zodat ik dat niet tijdens werktijd hoef te doen.

Grote klanten, flinke tijdsdruk (lijkt mij een bekend fenomeen in het wereldje )

In ieder geval bedankt voor de inzichten!

[Verwijderd]

Misschien is het een idee om een modern framework te gaan gebruiken zoals mootools, jquery. Dat zal je in ieder geval een eind opweg helpen met het events gebeuren etc

success