[JS] Ingewikkelde drag and drop met JQuary en Interface

[Mei]

Ik heb ergens op mijn pagina een stel spans staan die je moet kunnen slepen naar één van twee divs ergens anders op de pagina. Die divs zijn sortables, dus de elementen daarbinnen kan je sorteren met drag and drop. Nou had ik voor een wat simpelere drag and drop al JQuery en Interface (JS libraries) gebruikt en dat wilde ik dus hiervoor ook doen:

JavaScript:

function setFieldSettings()
{
    $('.field-settings').Sortable
    ({
        accept:'field-item',
        onHover:unlistFieldItem,
    });
}
function setListedFieldItems()
{
    $('#test').Draggable
    ({
    });
}
function unlistFieldItem(oDraggable)
{
    if(oDraggable.className.indexOf('listed')!=-1)
    {
        oDraggable.className=oDraggable.className.replace(' listed', '');
        oDraggable.parentNode.removeChild(oDraggable);
        this.appendChild(oDraggable);
        
        var sDraggableID='#'+oDraggable.id;
        $(sDraggableID).DraggableDestroy();
        
        setFieldSettings();
    }
    
}

1) setFieldSettings() en setListedFieldItems() worden aangeroepen bij window.onload.
2) De span (in dit geval alleen nog #test) wordt draggable gemaakt. De divs worden sortable gemaakt voor de spans die er al in staan. De draggables worden aangemaakt, omdat sortables geen elementen accepteren die buiten zichzelf staan, ook al kloppen de classNames.
3) Bij het hoveren van een sortable met een draggable wordt de draggable uit zijn oude parent gezet en aan de sortable toegewezen. Met setFieldSettings wordt de sortable opnieuw ingesteld, zodat de draggable ook gesorteerd kan worden (nu zit hij pas in de sortable).
4) Vervolgens wil ik de draggable destroyen, zodat die de sortable niet in de weg zit. Het probleem is dat een sortable van zijn te sorteren children ook draggables maakt, dus als ik na setFieldSettings(); de draggable destroy, dan werkt de sortable voor dat element niet meer goed en als ik voor die tijd de draggable destroy, dan heb ik de muis nog niet losgelaten en blijft aan de body volgens mij nog een onmouseover eventhandler hangen, getuige de melding "dragged.dragCfg.Oc has no preperties" in het bestand interface.js.

Ik hoop dat het zo een beetje duidelijk is geworden. Ik kan nog niet genoeg JS om een eigen customized sortable script te maken, dus ik ben van een library afhankelijk.

[Mei]

Kick. Kan iemand me pleeeaaase helpen? Ook al is het geen oplossing met Jquery en Interface. Mijn baas wil heeeeeel graag maandag dit werkend zien en de afgelopen week heb ik niet zoveel tijd gehad