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

To rozwiązanie działa bez regulacji pozycjonowania czegokolwiek, wystarczy sklonować element i uczynić go absolutnie pozycjonowanym.

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

Helper może być funkcją, która musi zwrócić element DOM do przeciągnięcia.

To mi pomogło:

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

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

Ten problem wydaje się występować, gdy dowolne z elementów nadrzędnych mają position ustawione na 'relative'. Musiałem przetasować znaczniki I zmienić mój CSS, ale usuwając tę właściwość ze wszystkich rodziców, byłem w stanie uzyskać .sortable() działa poprawnie we wszystkich przeglądarkach.

Wygląda na to, że ten błąd pojawia się bardzo często i za każdym razem pojawia się inne rozwiązanie. Żadne z powyższych, ani nic innego, co znalazłem w Internecie nie działało. Używam jQuery 1.9.1 i jQuery UI 1.10.3. Tak 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, nie testowałem go jeszcze w innych przeglądarkach.

Ten błąd został przeniesiony do http://bugs.jqueryui.com/ticket/6817 i, od około 5 dni temu (16 grudnia 2013 lub tam) wydaje się, że w końcu zostały naprawione. Teraz sugerujemy użycie najnowszej wersji deweloperskiej http://code.jquery.com/ui/jquery-ui-git.js {[2] } lub czekać na wersję 1.10.4, która powinna zawierać tę poprawkę .

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

Usuwam przepełnienie:

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

I działa idealnie!

Wydaje się niezwykłe, że ten błąd powinien zostać naprawiony tak długo. Dla mnie jest to problem na Safari i Chrome (tj. przeglądarki webkit), ale nie na IE7/8/9 ani na Firefoksie, który wszystko działa dobrze.

Znalazłem to ustawienie absolutne lub stałe, z lub bez !ważne, nie pomogło więc w końcu dodałem linię do mojej funkcji drag handler:

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

Spodziewałem się, że będę musiał uczynić tę linię WebKit specyficznym, ale co ciekawe, wszędzie działało dobrze. (Spodziewaj się komentarza ode mnie wkrótce mówiąc "er Nie, właściwie to zepsuło wszystkie inne przeglądarki".)

To co zrobiłem to:

$("#btnPageBreak").draggable(
        {
          appendTo: 'body',
          helper: function(event) {
            return '<div id="pageBreakHelper"><img  id="page-break-img"  src="page_break_cursor_red.png" /></div>';
          },
          start: function(event, ui) {
          },
          stop: function(event, ui) {
          },
          drag: function(event,ui){
            ui.helper.offset(ui.position);
         }
        });

Nie jestem do końca pewien, czy to zadziała w każdym przypadku, ale to obejście, które zrobiłem, działało dla mnie na wszystkich różnych sytuacjach, które musiałem przetestować (i gdzie poprzednie proponowane rozwiązania podane tutaj i gdzie indziej zawiodły)

(function($){
$.ui.draggable.prototype._getRelativeOffset = function()
{
    if(this.cssPosition == "relative") {
        var p = this.element.position();
        return {
            top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
            left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
        };
    } else {
        return { top: 0, left: 0 };
    }
};
}(jQuery));

( zgłosiłem to do jQuery.tracker interfejsu użytkownika, aby zobaczyć, co o tym myślą.. byłoby fajnie, gdyby ten 4-letni błąd mógł zostać w końcu poprawiony:/)

Używam JQuery draggable na Firefoksie 21.0 i mam ten sam problem. Kursor pozostaje o cal nad obrazem pomocniczym. Myślę, że jest to problem w samym Jquery, który nadal nie został rozwiązany. Znalazłem obejście tego problemu, którym jest użycie właściwości "cursorAt"przeciąganego. Użyłem go w następujący sposób, ale można to zmienić zgodnie z jego wymaganiami.

$('.dragme').draggable({
helper: 'clone',    
cursor: 'move',    
cursorAt: {left: 50, top: 80}
});

Uwaga: będzie to miało zastosowanie dla wszystkich przeglądarek, więc po użyciu tego kodu sprawdź swoją stronę we wszystkich przeglądarkach, aby uzyskać poprawną lewą i górną pozycję.

To mi się udało, po dostosowaniu wszystkiego, co przeczytałem na temat problemu.

$(this).draggable({
  ...
  start: function (event, ui) {
    $(this).data("scrollposTop", $('#elementThatScrolls').scrollTop();
    $(this).data("scrollposLeft", $('#elementThatScrolls').scrollLeft();
  },
  drag: function (event, ui) {
    ui.position.top += $('#elementThatScrolls').scrollTop();
    ui.position.left += $('#elementThatScrolls').scrollLeft();
  },
  ...
}); 

*elementThatScrolls jest rodzicem lub przodkiem z overflow:auto;

Ustala pozycję przewijanego elementu i dodaje pozycję pomocnika za każdym razem, gdy jest przesuwany / przeciągany.

To wygląda na obejście bez potrzeby używania position: absolute w rodzicu:)

$("body").draggable({
     drag: function(event, ui) { 
         return false; 
     } 
});

Udało mi się naprawić ten sam problem z dodaniem display: inline-block do przeciąganych elementów

Dodawanie position: relative nie działa dla mnie (jQuery nadpisuje go position: absolute przy przeciąganiu start)

Używane wersje jQuery:

• jQuery-1.7.2
• jQuery UI-1.11.4

Zrezygnowałem z używania jQueryUI draggable i przeniosłem się do lepszego pluginu o nazwie jquery.parzyste.drag , znacznie mniejszy rozmiar kodu, bez wszystkich bzdur jakie ma jQueryUI.

Zrobiłem stronę demo używając tej wtyczki wewnątrz kontenera, który ma pozycję: fixed

Demo

Mam nadzieję, że to komuś pomoże, bo ten problem jest duży.

Miałem podobny problem, tylko z konkretnym IE 10 działającym na Windows 8. Wszystkie inne przeglądarki działały dobrze. Usunięcie kursora: {top: 0 } rozwiązało problem.

Próbowałem różnych odpowiedzi tutaj, w tym aktualizacji jQuery i okazało się, że to działa dla mnie. Testowałem to na najnowszych chrome i IE. Myślę, że będzie to problem z różnymi rozwiązaniami w zależności od układu interfejsu użytkownika.

$('{selector}').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});

Dlaczego nie zająć pozycji kursora? używam wtyczki sortowalnej i naprawiam ją tym kodem:

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}

Miałem ten sam problem i okazało się, że wszystko to było z powodu Bootstrap navbar "navbar-fixed-top" klasy z pozycji do stałej, które poruszają się w dół mój <body> 60px niższe niż <html> top. Więc kiedy przesuwałem przeciągalne formularze w mojej witrynie, kursor pojawił się 60px na górze formularza.

Widać, że w narzędziu debugowania Chrome, w interfejsie Elements, kliknij znacznik <body>, a zobaczysz lukę między topem a ciałem.

Ponieważ używam tego navbara we wszystkich moich aplikacjach i nie chciałem modyfikować mojego inicjującego wywołania, aby przeciągnąć (zgodnie z procedurą DarthJDG) dla każdego formularza. Postanowiłem rozszerzyć przeciągalny widget w ten sposób i po prostu dodać yOffset w mojej przeciągalnej inicjalizacji.

(function($) {
  $.widget("my-ui.draggable", $.ui.draggable, {
    _mouseDrag: function(event, noPropagation) {

      //Compute the helpers position
      this.position = this._generatePosition(event);
      this.positionAbs = this._convertPositionTo("absolute");

      //Call plugins and callbacks and use the resulting position if something is returned
      if (!noPropagation) {
        var ui = this._uiHash();
        if(this._trigger('drag', event, ui) === false) {
          this._mouseUp({});
          return false;
        }
        this.position = ui.position;
      }
      // Modification here we add yoffset in options and calculation
      var yOffset = ("yOffset" in this.options) ? this.options.yOffset : 0;

      if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
      if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top-yOffset+'px';
      if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

      return false;
    }
  });
})(jQuery);

Teraz, gdy inicjalizuję przeciągalny element / formularz w witrynie za pomocą Bootstrap navbar:

// Make the edit forms draggable
$("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});

Oczywiście będziesz musiał eksperymentować, aby określić odpowiedni zestaw yOffset zgodnie z własną witryną.

W każdym razie dzięki DarthJDG, który wskazał mi właściwy kierunek. Zdrowie!