Jak przewinąć ekran podczas przeciągania elementów z przewijanych/sortowanych do innych, poza ekranem?

Question

Próbuję osiągnąć funkcję podobną do Trello do przeciągania elementów z jednej listy (fazy) do drugiej. Kiedy jest zbyt wiele list/faz, chciałbym, aby ekran przewijał się automatycznie podczas przeciągania od lewej listy do prawej najbardziej, która prawdopodobnie byłaby "poza ekranem".

Obecnie mam dwa poziomy sortowności, które można przewijać (patrz jsFiddle);

Pierwszy poziom przewija się poziomo, a drugi pionowo. Oznacza to, że mogę przenosić listy w poziomie i każdy element na liście tylko w pionie.

Na drugim poziomie, mam:

$('.phase-block').sortable({ 
    scroll: true, 
    connectWith: '.phase-block', 
    appendTo: '.phase-scroll', 
    helper: 'clone' 
}); 

co stawia pomocnika w pojemniku i pozwala mi przeciągnąć na listę po prawej stronie, ale nie pozwala na przewijanie w pionie w obrębie listy.

Czy istnieje sposób na utrzymanie obu rodzajów przewijania bez poświęcania jednego dla drugiego?

Answer 1

Aktualizacja

zmodyfikowałem na scroll funkcji tak, że będzie zachowywał się bardziej jak tradycyjnego przewijania (wcześniej miałem go tak, że każdy razem, gdy przeniósł się w górę lub w dół byłoby próbować przewijać). Został on również zaprojektowany głównie do pracy z podanym przykładem, a nie z szerszym zakresem rozmiarów skrzynek itp.

Teraz próbuję przewinąć w górę lub w dół tylko wtedy, gdy przeciągane pole osiągnie górną lub dolną krawędź paska przewijania. Jedyną trudną częścią jest to, w zależności od rozmiaru pola, które przeciągasz przesunięcie pola, w którym chcesz rozpocząć przewijanie, różni się w zależności od rozmiaru.

Jestem pewien, że istnieje sposób, aby dowiedzieć się, kiedy przeciągane pole jest więcej niż w połowie poniżej lub powyżej dolnej/górnej części okna przewijania, a następnie przewijać odpowiednio, ale rozwiązanie nie jest czymś, co udało mi się wymyślić w tym momencie.

Inną myślą, która ułatwiłaby to zadanie, byłaby znajomość wszystkich możliwych rozmiarów pudełek, które można przeciągnąć za pomocą tego scenariusza. Można ustawić obiekt z odniesieniem do wszystkich rozmiarów skrzynek połączonych z poszczególnymi wartościami, które można zmodyfikować, gdy rozpocznie się przewijanie dla danego rozmiaru pola. Jeśli jest to dla ciebie wykonalne, mogę ci pokazać, jak bym to zrobił.

Ale oto zaktualizowany przykład z najnowszym skrzypce, który ma różne wysokości bloków. Trochę pracowałam z kodem trochę, aby to zrobić bez względu na rozmiar bloku (z tych, które określiłeś) przewijanie rozpocznie się w tym samym czasie.

$('.phase-block').sortable({ 
     scroll: true, 
     connectWith: '.phase-block', 
     appendTo: '.phase-scroll', 
     helper: 'clone', 
     sort: function(event, ui){ 
      if(ui.offset.top >= activePhaseBlock.height()+(90 -ui.item.height() > 0 ? 65-ui.item.height() : 10)) 
       activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()+ui.item.height());  
      else if(ui.offset.top <= 0+(ui.item.height() > 25 ? 20 : 40)) 
       activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()-ui.item.height()); 
     }, 
     over: function(event, ui){ 
      activePhaseBlock = $(this); 
     } 
    }); 

Jeśli planujesz mieć losowe szczyty bloków to metoda ta prawdopodobnie nie będzie najbardziej opłacalne i musisz znaleźć uniwersalny sposób, aby określić, kiedy przesunięcie jest wystarczająco wysoka lub niska wystarczy rozpocznij przewijanie niezależnie od wielkości bloku.

Daj mi znać, jeśli potrzebujesz wyjaśnienia.

Fiddle Example