Pytanie jQuery draggable pokazuje pomocnika w niewłaściwym miejscu po przewinięciu strony


Używam jQuery przeciągalny i zrzucane dla systemu planowania pracy, który rozwijam. Użytkownicy przeciągają zadania do innego dnia lub użytkownika, a następnie dane są aktualizowane przy użyciu wywołania ajax.

Wszystko działa dobrze, z wyjątkiem sytuacji, gdy przewijam stronę główną (zadania pojawiają się w dużym, planowanym tygodniu, który wykracza poza dolną część okna przeglądarki). Jeśli spróbuję przeciągnąć tu element przeciągalny, element pojawi się nad moim kursorem myszy w takiej samej liczbie pikseli, jak przewinąłem w dół. Stan wskaźnika myszy nadal działa poprawnie, a funkcja jest włączona, ale nie wygląda prawidłowo.

Używam jQuery 1.6.0 i jQuery UI 1.8.12.

Jestem pewien, że istnieje funkcja offsetowa, którą muszę dodać, ale nie wiem, gdzie ją zastosować lub czy jest lepszy sposób. Oto mój .draggable() kod inicjalizacyjny:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

Jakiś pomysł, co mogę zrobić, żeby to naprawić?


76
2018-04-26 14:31


pochodzenie


czy możesz podać trochę działającego demo - jimy
@jimy to wszystko jest dynamiczne i bardzo bezpieczne, więc musiałbym napisać zupełnie nowy przykład; Zrobię, jeśli nikt nie ma szybkiej odpowiedzi JAK NAJSZYBCIEJ. - Alex
Czy możesz opublikować wszystkie właściwości css, które twój draggable posiada lub dziedziczy? - DarthJDG
Za moją odpowiedź daleko poniżej, wydaje się być w końcu naprawione - Patrick


Odpowiedzi:


Może to być powiązany raport o błędzie, który istnieje od dłuższego czasu: http://bugs.jqueryui.com/ticket/3740

Wydaje się, że dzieje się tak w każdej testowanej przeglądarce (Chrome, FF4, IE9). Istnieje kilka sposobów obejścia tego problemu:

1. Posługiwać się position:absolute; w twoim css. Wydaje się, że nie ma to wpływu na elementy absolutnie pozycjonowane.

2. Upewnij się, że element nadrzędny (zdarzenie, jeśli to ciało) ma overflow:auto; zestaw. Mój test pokazał, że to rozwiązanie poprawia pozycję, ale wyłącza funkcję automatycznego przewijania. Nadal możesz przewijać za pomocą kółka myszy lub klawiszy strzałek.

3. Zastosuj poprawkę sugerowaną w powyższym raporcie błędów ręcznie i sprawdź dokładnie, czy powoduje to inne problemy.

4. Poczekaj na oficjalną poprawkę. Planowany jest jQuery UI 1.9, choć w przeszłości był kilkakrotnie przełożony.

5. Jeśli masz pewność, że dzieje się to w każdej przeglądarce, możesz umieścić te hacki w odpowiednich zdarzeniach przeciągania, aby poprawić obliczenia. Testowanie wymaga jednak wielu różnych przeglądarek, więc powinno być używane tylko w ostateczności:

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});

101
2018-04-26 20:09



To wspaniale, dziękuję! (Przepełnienie ustawień: automatycznie naprawione natychmiast. Zastosowałem styl do poszczególnych komórek tabeli. - Alex
jsfiddle.net/a2hzt/5  overflow-y: przewijanie elementu html powoduje również powstanie tego problemu na firefox (chrome works), po prostu przewiń w dół i spróbuj przeciągnąć. - digitalPBK
To ba-a-ack, dla helper: "clone". bugs.jqueryui.com/ticket/9315  Poziom bloker, wycięcie nad głównym. tj.vantoll mówi: "6 dających się przeciągnąć poprawek, które pojawiły się w 1.10.3, może być podejrzane." Najprostszy przykład: jsfiddle.net/7AxXE - Bob Stein
Potwierdzony, ten błąd jest w Interfejs jQuery 1.10.3 ale nie 1.10.2 - Bob Stein
Wygląda na to, że problem istnieje również w jQuery UI 1.10.4. Po prostu się trzymam 1.10.2 Na razie! - lhan


To rozwiązanie działa bez ustawiania pozycji, po prostu klonujemy element i ustawiamy go absolutnie na miejscu.

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

Pomocnik może być funkcją, która musi zwrócić element DOM, aby przeciągnąć.


41
2017-09-28 15:04



+1 Dziękuję bardzo, to działa dla mnie z sortowalnym (miałem zamiar spróbować czegoś podobnego, ale mniej eleganckiego). Masz małą literówkę z $ j! :) - Iain Collins
Dla mnie: drag nie działa w ogóle z tym i zwraca błędy: TypeError: this.offsetParent [0] jest niezdefiniowany - ProblemsOfSumit
Myślę, że to ui.helper nie tylko ui - Mohammed Joraid
Dziękuję, pomóż mi w Sortable - BG Bruno
Po upublicznieniu tego jako jednego z mniej hackowskich rozwiązań zdałem sobie sprawę, że problemem dla mnie był rodzic position: relative jak @Josh Bambrick odkrył - Dominic Tobias


To zadziałało dla mnie:

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},

11
2018-01-24 19:02



To rozwiązanie sprawdziło się doskonale. Dzięki! - Marc Litchfield
Pracował dobrze! ty - themis
napraw mój problem, "1.11.0" - Зелёный
pracuj nad jQuery 1.10.2, a nie naprawiaj @DarthJDG - Andry Yosua
To zabawne rozwiązanie, ale działa tylko w przeglądarkach, w których występuje błąd (Chrome). Przeglądarki, które nie mają błędu, będą go teraz miały, ale odwrócą :) - manu


Wygląda na to, że ten błąd pojawia się bardzo często i za każdym razem jest inne rozwiązanie. Żadne z powyższych, ani nic, co znalazłem w Internecie, nie działało. Używam jQuery 1.9.1 i Jquery UI 1.10.3. Oto jak to naprawiłem:

$(".dragme").draggable({
  appendTo: "body",
  helper: "clone",
  scroll: false,
  cursorAt: {left: 5, top: 5},
  start: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  },
  drag: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  }
});

Działa w FF, IE, Chrome, jeszcze nie przetestowałem go w innych przeglądarkach.


7
2018-06-04 06:22



to działało dla mnie, ale musiałem użyć ui.offset.top zamiast ui.position.top - c.dunlap


Przepraszamy za napisanie kolejnej odpowiedzi. Ponieważ żadne z rozwiązań opisanych w powyższej odpowiedzi nie może być wykorzystane przeze mnie, zrobiłem dużo Googling i wprowadziłem wiele frustrujących drobnych zmian zanim znalazłem inne rozsądne rozwiązanie.

Ten problem zdaje się występować zawsze każdy z elementów macierzystych position ustaw "względny". Musiałem przetasować mój znacznik i zmienić mój CSS, ale dzięki usunięciu tej właściwości od wszystkich rodziców udało mi się uzyskać .sortable()działa poprawnie we wszystkich przeglądarkach.


6
2017-07-13 17:01



To samo dla mnie tutaj. Każdy position: relative; w każdym rodzicu powoduje to. - wojtiku
całkowicie agresywny! Dla mnie był to po prostu styl inline w ciele position: relative; które trzeba było usunąć ... elementy macierzyste między przeciągalnym a ciałem wydają się nie powodować problemów tutaj. - con
Omg to było dzięki, garrr, dlaczego ludzie nie używają Dragula w dzisiejszych czasach - dzięki! - Dominic Tobias
Dziękuję bardzo! Rodzic rodzica mający pozycję: względny spowodował to dla mnie - wjk2a1


Ten błąd został przeniesiony do http://bugs.jqueryui.com/ticket/6817 i około 5 dni temu (16 grudnia 2013 r. lub później) wydaje się, że zostało ostatecznie naprawione. Sugestia teraz jest użycie najnowszej wersji rozwojowej z http://code.jquery.com/ui/jquery-ui-git.js lub czekać na wersja 1.10.4, która powinna zawierać tę poprawkę.

Edytować: Wygląda na to, że ta poprawka może być teraz częścią http://bugs.jqueryui.com/ticket/9315 którego nie planuje się opuścić do wersji 1.11. Używanie powyższej połączonej wersji jQuery z kontrolą źródła wydaje się naprawić problem dla mnie i @Scott Alexander (komentarz poniżej).


5
2017-12-22 02:04



Używam wersji 1.10.4 i błąd nadal istnieje, użyłem tego linku i wszystko działa dobrze. - Scott Alexander
@ScottAlexander Poprawka mogła zostać przywiązana do innego biletu, niż myślałem. Na tej podstawie zredagowałem swoją odpowiedź. Dzięki! - Patrick


Usuwam przepełnienie:

html {overflow-y: scroll; background: #fff;}

I działa idealnie!


4
2017-09-27 08:27





Wydaje się niezwykłe, że ten błąd powinien był zostać usunięty tak długo. Dla mnie jest to problem w Safari i Chrome (np. W przeglądarkach internetowych), ale nie w IE7 / 8/9 ani w Firefoksie, które działają bez zarzutu.

Zauważyłem, że ustawienie absolutne lub stałe, z lub bez! Ważne, nie pomogło, więc na końcu dodałem linię do mojej funkcji przeciągania:

ui.position.top += $( 'body' ).scrollTop();

Spodziewałem się, że będę musiał wykonać tę linię, ale ciekawie wszystko działało dobrze. (Spodziewaj się od mnie komentarza, który wkrótce powie "nie, faktycznie to zawiodło wszystkie inne przeglądarki".)


3
2017-08-15 11:21



To działa, ale podczas przewijania podczas przeciągania nadal przesuwa pozycję y. Rozwiązanie nr 5 DarthJDG działa również podczas przewijania podczas przewijania. - mirelon