[JS/jQuery] Drag'n'drop events.

[supakeen]

Dag saam.

Ik zit met de volgende issue. Ik heb een mega tree, deze tree bestaat uit een mooie html ul met weer ul'letjes daarin enzovoorts enzoverder.

Nu gebruik ik jQuery om daar een draggable/droppable structuur van te maken met callbacks die via AJAX onmiddelijk de database aanpassen en het frame verversen indien nodig. Tot zover nog geen enkel probleem.

In mijn geval zijn echter ook subnodes in te klappen en hier loopt alles een beetje spaak. Zodra ik een subnode inklap zijn de coordinaten die voor de droppables zijn opgeslagen niet meer van toepassing aangezien de elementen onder de ingeklapte subnode omhoog zijn geschoven. Doordat de posities van de droppables niet meer kloppen kun je dus ook de draggables niet meer goed erin droppen.

Omdat het hier zo een grote tree gaat worden subnodes ingeladen met AJAX en maak ik gebruik van jquery.event.drop en jquery.event.drag.

Nou dacht ik, als ik nou opnieuw al mijn drop events bind op het moment dat een node wordt uitgeklapt/ingeklapt dan kloppen de posities weer en is er geen centje pijn. Echter, dat werkt niet.

Even wat code:

code:

function create_drop_targets() {
  $('li a')
    .bind('dropstart', function(event) {
    })
    .bind('drop', function(event) {
    })
    .bind('dropend', function(event) {
    });
}

Ik heb de code binnen de events even weggelaten.

Nou ben ik erachter gekomen dat jquery.event.drop bij het gebruik een functie setup bevat. Deze functie berekent alle droptargets op de volgende manier:

code:

var drop = $.event.special.drop = {
    setup: function(){
        drop.$elements = drop.$elements.add( this );
        drop.data[ drop.data.length ] = drop.locate( this );
        },
    locate: function( elem ){ // return { L:left, R:right, T:top, B:bottom, H:height, W:width }
        var $el = $(elem), pos = $el.offset(), h = $el.outerHeight(), w = $el.outerWidth();
        return { elem: elem, L: pos.left, R: pos.left+w, T: pos.top, B: pos.top+h, W: w, H: h };
        }

Ook hier heb ik weer andere (mijns inziens) irrelevante data weggehaald, zie hier voor het volledige bestand.

Als iemand mij kan helpen te vertellen hoe ik opnieuw alle droptargets laat uitrekenen dan ben ik heel blij

[supakeen]

Subtiele schop.

[Bosmonster]

Heb je al eens andere drag/drop gebruikt dan deze? Want deze lijkt me gewoon nogal gaar werken.

Als ik de jQuery UI draggable/droppable pak bijvoorbeeld maakt het niet of de droppable verandert, het blijft gewoon werken.

[ Voor 40% gewijzigd door Bosmonster op 09-04-2009 10:42 ]

[supakeen]

Bosmonster schreef op donderdag 09 april 2009 @ 10:35:
Heb je al eens andere drag/drop gebruikt dan deze? Want deze lijkt me gewoon nogal gaar werken.

Als ik de jQuery UI draggable/droppable pak bijvoorbeeld maakt het niet of de droppable verandert, het blijft gewoon werken.

Het probleem van de jquery draggable/droppable is dat ze op het moment van het beginnen van slepen alle droptargets opnieuw uitrekenen. Dit maakt het hele gebeuren nogal zwaar voor de client. Als dit op het moment van het in/uitklappen zou gebeuren kan ik gewoon een generiek loading plaatje laten zien en worden mensen daar niks wijzer van behalve dan dat alles er netjes uit blijft zien en blijft werken.