JQuery Sortierbare Style-Funktion mit leeren Stellen

Question

Im Interesse zu lernen, wie man das effizienter macht, bin ich neugierig auf irgendwelche Gedanken, wie man das verbessert oder wenn ich zusammen den falschen Weg gehe.

Bisher habe ich geschrieben, http://jsfiddle.net/mstefanko/LEjf8/9/

Diese Griffe im Grunde, was ich es auf einem kleinen Maßstab will.

Es gibt einige Bugs und ich bin überhaupt nicht zuversichtlich, dass dies so gut wie es geschrieben werden könnte, könnte ein Idiot sein, nicht versuchen, auf jquery ui sortierbar zu halten. Aber da ich dies ohne eine einfache Liste von Elementen tun musste und dies auf mehrere Drag and Drop erweitern wollte, wollte ich zumindest durchgehen, was ich tun musste, um dies zu erreichen, selbst wenn es nur darum ging, wie das funktioniert Sortierfunktionen wie diese funktionieren.

Das Problem Kind,

Das ist alles in einer Funktion auf dem Over-Ereignis des abwerfbaren()

ich eine Reihe von leeren Flecken

var emptyHolders = []; 

    $('.pipeline-holder').each(function(){ 
     if($(this).hasClass('holder-empty')){ 
      var eid = $(this).attr('id'); 
      emptyHolders.push(eid.substring(14)); 
     } 
    }); 

cid haben genannt ist das absenkbare Element, über dem du oben bist, also finde ich den nächsten offenen Schlitz unter Verwendung

for (var i = 0; i < emptyHolders.length; i++) { 
     var currentEmpty = emptyHolders[i]; 
     if (currentEmpty > cid) { 
      nextEmpty = currentEmpty; 
      i = emptyHolders.length; 
     } else { 
      prevEmpty = parseInt(currentEmpty); 
     } 
    } 

Wenn sich in der Liste ein leerer Steckplatz befindet, verwende ich eine for-Schleife, um die Elemente um das DOM herum zu verschieben, um Platz für das Löschen des Elements zu schaffen.

if (nextEmpty != null) { 
     var moveMe = nextEmpty -1; 

     for (var i = moveMe; i >= cid; i--) { 

      var nextcount = i + 1; 
      var me = $('#pipeline-rank-' + i);  
      var next = $('#pipeline-rank-' + i).parents('.pipeline-rank-row').next().find('.pipeline-holder'); 
      var pid = $('#pipeline-rank-' + i).find('.content-wrapper').attr('id'); 

      next.append($('#pipeline-rank-' + i).find('.content-wrapper')); 
      next.removeClass('holder-empty'); 
      next.siblings('.remember-my-position-hover').html(pid); 
     } 
     $('#pipeline-rank-' + cid).addClass('holder-empty'); 
    } 

Wenn es nicht ein weiter unten in der Liste enthalten ist, kann ich das Gleiche in umgekehrter Richtung zu überprüfen, ob es eine Stelle über dem abwerfbaren ist es, Elemente zu drücken in.

Alle Gedanken werden sehr geschätzt!

Answer 1

Für so etwas ist es wahrscheinlich wert, DOM-Elemente direkt zu manipulieren und Referenzen darauf in einem Array zu halten, anstatt jQuery-Selektoren zu verwenden. Sie fingen an, dies mit emptyHolders zu tun, aber ich würde es für alle die Container tun (dropable Elemente).

Ich würde zwei Listen/Arrays behalten: eins mit dem Zustand vor dem Ziehen und eins zum Anzeigen. Immer wenn der Ziehvorgang über einen neuen Container hinausgeht, würde ich zuerst den Zustand auf den Zustand vor dem Ziehen zurücksetzen und dann den geänderten Zustand von dort neu berechnen und dann den geänderten Zustand anzeigen. (Um Flimmern zu vermeiden, würde ich den Zustand vor dem Ziehen nicht wirklich anzeigen, sondern setze einfach meine interne Liste darauf zurück.) Auf diese Weise vermeiden Sie, die Liste mit dem neuen Zusatz so weit wie möglich zu stören.

Um Platz für das neue Element zu machen, schlage ich folgende:

• Wenn das aktuelle Element leer ist, keine Änderung.
• Wenn das aktuelle Element nicht leer ist, sondern sich ein leerer Bereich darüber befindet, verschieben Sie Elemente unter dem leeren Bereich um eins, bis der aktuelle Bereich leer ist.
• Wenn oben kein Speicherplatz vorhanden ist, verschieben Sie die Elemente nach unten, und erweitern Sie die Liste, wenn in der Liste kein leerer Bereich vorhanden ist.

Das heißt, vorausgesetzt, ich verstehe Ihre Bedürfnisse richtig. Der häufigere Fall ist, keine leeren Räume irgendwo zu erlauben. Alle Einfügungen werden am Ende der Liste oder am Anfang der Liste hinzugefügt oder zwischen zwei Listenelementen ohne hinzugefügte Leerzeichen verschoben. Wenn Sie etwas auf die Liste setzen, wird es sofort angezeigt, bis es in ein anderes Element oder das erste Element in der Liste hineinläuft.