[js] drag-and-drop gaat niet uit zn containing div

[hobbeldebobbel]

op deze url staat een pagina met daarop een dynamisch cursisten-boten verdeel systeempje.

nu heb ik een groot deel aan het werk en kon ik al cursisten en instructeurs vanuit de rechter zijde verslepen naar de twee verschillende plekjes per boot: een instructeur gebied en een cursist gebied en dmv functies kijk ik of het een instructeur of cursist is.

een boot bestaat grofweg uit de volgende divjes:

HTML:

<div>
     <div id=instr_drop45>
     </div>
      <div id=cur_drop45>
      </div>
</div>

als ik een cursist vanuit de rechter zijde van het systeem versleep naar de cur drop dan laat ik hem door:

JavaScript:

function dropItems(idOfDraggedItem,targetId,x,y)
{
    var targetObj = document.getElementById(targetId);  
    var sourceObj = document.getElementById(idOfDraggedItem);
    //grafisch koppelen
    targetObj.appendChild(sourceObj);   
}

en gaat alles goed. Ik kan hem daarna weer optillen en verplaatsen.

so far so good... maar

uiteraard zijn er bijvoorbeeld al eens instructeurs toegewezen en opgeslagen in de database. Ik laat eerst het script draaien; en daarna ga ik met de volgende functie een divje maken: een instructeurs ding:

JavaScript:

function maakInstructeurDiv(I_ID, jz, kb, zwb, waar){
    nieuweINST = document.createElement("div");
    nieuweINST.innerHTML = 'boe'+I_ID;
    nieuweINST.className = 'INSTdragableBox';
    nieuweINST.setAttribute('id','ins'+I_ID);
    
    nieuweINST.setAttribute('jz',jz);
    nieuweINST.setAttribute('kb',kb);
    nieuweINST.setAttribute('zwb',zwb);
                              alledivs = document.getElementsByTagName('div')
        for(i=0;i<alledivs.length; i++){
            if(alledivs[i].getAttribute('bootid') == waar){
                //kijken naar de ID naam
                if(alledivs[i].getAttribute('id').indexOf('instr_drop')){
                    
                }else{
                    //we zitten goed!!
                    deid = alledivs[i].getAttribute('id');
                    //alert(deid)
                    document.getElementById(deid).appendChild(nieuweINST)
                };
            }
        };

vanwege een ietwat gecompliceerd samenhangend iets (de id van de div die moet uniek zijn) word uiteindelijk bij:
document.getElementById(deid).appendChild(nieuweINST)
het ding wederom gekoppeld.
op eenzelfde soort manier als bij de dropitems functie.

MAAR nu komt het probleem.
de instructeur toegevoegd door de laatste functie lijkt vast te zitten in zijn containing divje. Terwijl een nieuwe instructeur uit de rechter kant gewoon versleept kan worden.... Hoe kan dat?
Als je kijkt op deze url dan zie je dat aan de linker kant twee instructeurs reeds ingedeeld zijn, boe2 en boe14 als je deze probeert weg te slepen dan zie je scrollbars. Daarentegen de boe's aan de rechterkant die hebben dat niet.

komt het doordat ze in drie divjes zitten en de rechter niet?
komt het door de CSS?
ze zijn op eenzelfde soort manier opgebouwd dus opzich zou dat niet uit moeten maken... toch?

dit is de broncode: bootindeling.php en de gelinkte JS ik hoop dat jullie me kunnen helpen want ik zit in een cirkeltje te werken!

thanx

[hobbeldebobbel]

misschien ten overvloede: in FF en MSIE treed hetzelfde probleem op.

[ Voor 68% gewijzigd door hobbeldebobbel op 03-02-2007 20:22 ]

[Blaise]

Als een element niet uit zijn container kan, heeft de container waarin dat element zit een position relative of absolute (CSS), dus dan is de top en left waarde van het element ten opzichte van van de container, waardoor die er niet uit kan.

[ Voor 7% gewijzigd door Blaise op 03-02-2007 20:58 ]

[hobbeldebobbel]

Blaise schreef op zaterdag 03 februari 2007 @ 20:57:
Als een element niet uit zijn container kan, heeft de container waarin dat element zit een position relative of absolute (CSS), dus dan is de top en left waarde van het element ten opzichte van van de container, waardoor die er niet uit kan.

als ik alle relative/absoluut gepositioneerde dingen weghaal uit mijn css dan blijft het probleem bestaan althans in IE. In FF2.0 daarentegen doet ie het wel alleen gaat het sleepbaar gedeelte onder de andere divjes door.

[benoni]

Ik krijg helemaal niets verplaatst (met Safari)

Misschien kun je hier wat van gebruiken m.b.t. browser compatibility: Walter Zorn's drag'n'drop library. Of je moet die hele library er aan hangen, maar da's wel hoop scripting waarvan je een enkele functie gebruikt.

[hobbeldebobbel]

hmm die ziet er ook wel leuk uit, maar die kan volgens mij niet terug zweven naar waar hij vandaan kwam zeg maar.
het script moet werken in FF, ie5.5 en op8

misschien dat ik de hele code maar eens opnieuw ga schrijven.. het is te veel een rotzooi geworden.