[JS] jQuery & Interface: Draggables, droppables en sortables

[Mei]

Ik wilde jQuery samen met Interface gebruiken om een aantal dingen te kunnen draggen en droppen en wel op zo'n manier dat alles netjes onder elkaar komt te staan, ipv dat het overlapt.

Mijn HTML bestaat schematisch gezien uit het volgende:

HTML:

<div id="kolomlinks" class="container">
  <div class="box" id="widget_1">
    <div class="handle" id="dragbar_1">
    </div>
  </div>
</div>
<div id="kolomrechts" class="container">
  <div class="box" id="widget_2">
    <div class="handle" id="dragbar_2">
    </div>
  </div>
</div>

Ik heb dus twee kolommen met in elke kolom een aantal boxen. In elke box zit een handle voor het draggen. Nou mogen de boxes alleen binnen die twee geplaatst worden en mogen ze elkaar niet overlappen. Dat laatste moet met sortable gedaan worden:

JavaScript:

function setragBars()
{
    for(var i=0; i<iWidgetIDsLength; i++)
    {
        var sID=aWidgetIDs[i];
        var sDragBarID='dragbar_'+sID;
        var sWidgetID='widget_'+sID;

        $('#'+sWidgetID).Draggable
        ({
            handle:'#'+sDragBarID,
            snapDistance:5,
            opacity:0.7,
        });
    }
    setSortables();
}
function setSortables()
{
        $('div.container').Sortable(
            {
                accept: 'box',
                helperclass: 'sortHelper',
                activeclass :   'sortableactive',
                hoverclass :    'sortablehover',
                handle: 'div.itemHeader',
                tolerance: 'pointer',
            }
        );
}

function setDropzones()
{
    $('div.container').Droppable
    ({
                accept: 'box',
                }
    });
}

Het draggen gaat opzich wel goed, maar het droppen gaat voor geen meter. De pagina staat hier Het voorbeeld op de site van Interface staat hier. Ik zie in dat voorbeeld helemaal geen Draggable en Droppable functies, terwijl het wel werkt. Probeer ik het zelf alleen met een Sortable, dan valt er niks te slepen. Ik ben nu al uren aan het zoeken naar hoe ik dit moet oplossen, maar de originele documentatie is nogal zeer (té) beknopt en via Google kom ik ook niks te weten over hoe je zoiets fatsoenlijk op moet zetten. Hopelijk heeft hier iemand ervaring met dit gedoe...

[Mei]

Schaamteloze schop onder de kont.

[Mei]

Fixz0red, gewoon alleen sortables instellen:

JavaScript:

$('.container').Sortable(
    {
        accept:'box',
        handle:'.dragbar',
    }
);

Accept is trouwens de enige parameter die verplicht is, maar voor mij doeleinde mag niet het hele element als handle dienen.