Jquery Sortowalna funkcja stylu z pustymi miejscami

Question

Aby dowiedzieć się, jak to zrobić w bardziej efektywny sposób, jestem ciekawy pomysłów, jak to poprawić lub czy idę źle razem.

Dotychczas pisałem, http://jsfiddle.net/mstefanko/LEjf8/9/

uchwyty to w zasadzie to, co chcę go na małą skalę.

Jest kilka błędów i nie mam całkowitej pewności, że jest to tak dobre, jak można napisać, może być idiotą, bo nie próbuje się zatrzasnąć na jquery ui sortable. Ale z koniecznością zrobienia tego bez prostej listy przedmiotów, a także z chęcią rozszerzenia tego, tak aby obejmowała wielokrotne przeciąganie i upuszczanie, chciałem przynajmniej przejrzeć to, co musiałem zrobić, aby to się stało, nawet jeśli było po prostu dowiedzieć się, jak to zrobić. funkcje sortowania, takie jak te.

Problem dziecko,

To wszystko jest w funkcję o nazwie na razie na części droppable()

Mam tablicę pustych plam

var emptyHolders = []; 

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

cid jest element, którego nie można pominąć, więc znajduję następny otwarty slot przy użyciu

Jeśli w dolnej części listy znajduje się puste miejsce, używam pętli for, aby przesuwać elementy wokół DOM, aby uzyskać miejsce potrzebne do upuszczenia elementu.

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'); 
    } 

Jeśli nie ma jednej dalej w dół listy, robię to samo w drugą stronę, by sprawdzić, czy jest spot powyżej droppable do pchania się do przedmiotów.

Wszelkie przemyślenia są niezwykle cenne!

Answer 1

Dla czegoś takiego prawdopodobnie warto manipulować elementami DOM bezpośrednio i zachować odniesienia do nich w tablicy, zamiast używać selektorów jQuery. Zacząłeś to robić z emptyHolders, ale zrobiłbym to dla wszystkich kontenerów (elementy, które można pominąć).

Chciałbym zachować dwie listy/tablice: jedną ze stanem przed przeciągnięciem i jedną do wyświetlenia. Ilekroć przeciągnięcie przechodzi przez nowy kontener, najpierw resetowałem stan do stanu pre-drag, a następnie przeliczałem stan zmieniony stamtąd, a następnie pokazywano nowy zmieniony stan. (Aby uniknąć migotania, nie pokazałbym stanu pre-drag, tylko zresetuj moją wewnętrzną listę.) W ten sposób unikasz zakłócania listy z nowym dodatkiem tak bardzo, jak to tylko możliwe.

Aby zrobić miejsce dla nowego elementu, proponuję następujące:

• Jeśli bieżący element jest pusta, bez zmian.
• Jeśli bieżący element nie jest pusty, ale nad nim znajduje się pusta przestrzeń, przenieś elementy poniżej pustej przestrzeni w górę o jeden, dopóki bieżące miejsce nie będzie puste.
• Jeśli nie ma wolnego miejsca powyżej, a następnie przenieś elementy w dół, rozszerzając listę, jeśli nie ma pustego miejsca na liście.

Oznacza to, że prawidłowo rozumiem Twoje potrzeby. Najczęstszym przypadkiem jest nie dopuszczanie pustych przestrzeni w dowolnym miejscu. Wszystkie wstawienia dodają się do końca listy lub nagłówka listy lub przechodzą między dwoma elementami listy bez dodawania spacji. Jeśli upuścisz coś na listę, natychmiast unosi się, dopóki nie natrafi na inny przedmiot lub nie stanie się pierwszą pozycją na liście.