Jquery Przeciąganie i upuszczanie w zagnieżdżonych listach - jak zminimalizować/usunąć migotanie

Na podstawie http://jqueryui.com/demos/sortable/#placeholder pracuję nad interfejsem przeciągania i upuszczania, który pozwala użytkownikowi na reorganizację list zagnieżdżonych. Jak widać z the link działa to doskonale na prostych listach.Jquery Przeciąganie i upuszczanie w zagnieżdżonych listach - jak zminimalizować/usunąć migotanie

Jednak, gdy próbuję go z listami zagnieżdżonymi, dostaję dość złe migotanie. Spróbuj go pod adresem:

http://jsfiddle.net/unklefolk/G5xPE/

Po przeprowadzce jakieś wewnętrzne elementy do zewnętrznej listy i wizy versa widać, że tam jest trochę migotania/rozsiewania dzieje, szczególnie wokół punktu, w którym zewnętrzna lista spełnia i wewnętrzna lista.

Co mogę zrobić, aby zminimalizować to migotanie? Czy są jakieś zmiany w jQuery lub CSS, które mogę wprowadzić, aby zmniejszyć ten problem?

Źródło

2011-11-10 Mark Robinson

Spójrz na tego pod plugin sortable. Jest to element oparty na liście, ale może to być odpowiedź na Twój problem.

nestedSortable jQuery Plugin

Źródło

2011-12-02 17:02:52 Brian

Świetny link Brian. Ta wtyczka wydaje się bardziej podobna do tego, czego potrzebuję. Szkoda, że nie znalazłem tego kilka miesięcy temu. Być może nie będę w stanie użyć tego rozwiązania, ponieważ jestem dość daleko w drodze jQuery UI, a czas jest ograniczony, ale przyznam tę odpowiedź nagrodę, która wydaje się najlepszym rozwiązaniem dla innych użytkowników SO, którzy napotykają ten problem. –

Już raz miałem podobny problem, nie mam czasu, aby go dostosować, ale oto moje rozwiązanie.

Użyj zwrotnego JS:

$(document).ready(function() { 
    var s = $("#sortable"); 
    s.sortable({ 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      var ranks = ['gold','silver','bronze']; 
      $("li",s).each(function (idx) { 
       for(var i = 0; i < ranks.length; ++i) $(this).removeClass(ranks[i]); 
       $(this).addClass(ranks[idx]); 
      }); 
     } 
    }); 
});

Widać to here in jsfiddle.net

Źródło

2011-11-10 14:26:15 Kyle

Dzięki za cynk, Kyle. Niestety, wziąłem twoje skrzypce, rozszerzyłem je na listy zagnieżdżone i wciąż dostaję migotanie, kiedy poruszam się między poziomami. http://jsfiddle.net/unklefolk/uueFC/ Nie jestem pewien, czy czegoś brakuje? –

Podane przez ciebie skrzypce nie ma zagnieżdżonej listy :) – Kyle

Przeprosiny. Spróbuj tego: http://jsfiddle.net/unklefolk/uueFC/3/ Obawiam się, że zgubiłem ładne czekoladowe obrazy, ale myślę, że jest w istocie to samo. –

Zwykle używam helper: 'clone' wich ma jakiś wpływ na ten problem (nigdy nie zrozumiał, dlaczego) .I nie wiem, czy to działa, na mój firefox 8 wygląda lepiej

$(function() { 
    $(".sortable").sortable({ 
     placeholder: "ui-state-highlight", 
     connectWith: ".sortable", 
     helper: 'clone' 
    }); 
    $(".sortable").disableSelection(); 
});

http://jsfiddle.net/nicolapeluchetti/G5xPE/17/

Źródło

2011-12-02 17:11:01

Dzięki za odpowiedź, Nicola. Wydaje się, że nie ma to większego wpływu na moją implementację, ale mam nadzieję, że to pomoże komuś innemu. –

OP tutaj. Po prostu chciałem opublikować to, co w końcu zrobiłem, żeby to naprawić. Na podstawie http://bugs.jqueryui.com/ticket/4741?cversion=0&cnum_hist=8 I odkomentowane następującej linii w jQuery-UI-1.8.6.js:

&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container

wciąż użyć atrybutu connectWith.

Mogę teraz przeciągać i upuszczać między poziomami w hierarchii bez migotania. Mam nadzieję, że to pomaga innym użytkownikom SO.

Źródło

2011-12-22 08:55:44

Jquery Przeciąganie i upuszczanie w zagnieżdżonych listach - jak zminimalizować/usunąć migotanie

Odpowiedz

Powiązane problemy