jQuery draggable zeigt den Helfer an der falschen Stelle an, nachdem die Seite gescrollt wurde

Ich verwende jQuery ziehbar und ablegbar für ein Arbeitsplanungssystem, das ich entwickle. Benutzer ziehen Jobs an einen anderen Tag oder Benutzer, und dann werden die Daten mithilfe eines Ajax-Aufrufs aktualisiert.

Alles funktioniert einwandfrei, außer wenn ich auf der Hauptseite nach unten scrolle (Jobs werden in einem großen Wochenplaner angezeigt, der den unteren Rand meines Browserfensters überschreitet). Wenn ich versuche, ein ziehbares Element hierher zu ziehen, wird das Element über meinem Mauszeiger mit der gleichen Anzahl von Pixeln angezeigt, die ich nach unten gescrollt habe. Der Schwebezustand funktioniert immer noch einwandfrei und die Funktionalität ist aktiviert, sieht aber nicht richtig aus.

Ich verwende jQuery 1.6.0 und jQuery UI 1.8.12.

Ich bin sicher, dass ich eine Offset-Funktion hinzufügen muss, aber ich weiß nicht, wo ich sie anwenden soll oder ob es einen besseren Weg gibt. Hier ist mein .draggable()Initialisierungscode:

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

Irgendeine Idee, was ich tun kann, um das zu beheben?

Dies könnte ein verwandter Fehlerbericht sein, den es schon eine ganze Weile gibt: http://bugs.jqueryui.com/ticket/3740

Es scheint in jedem von mir getesteten Browser (Chrome, FF4, IE9) zu passieren. Es gibt einige Möglichkeiten, wie Sie dieses Problem umgehen können:

1. Verwenden Sie position:absolute;in Ihrem CSS. Absolut positionierte Elemente scheinen nicht betroffen zu sein.

2. Stellen Sie sicher, dass das übergeordnete Element (Ereignis, wenn es sich um den Body handelt) overflow:auto;festgelegt wurde. Mein Test hat gezeigt, dass diese Lösung die Position korrigiert, aber die Autoscroll-Funktionalität deaktiviert. Sie können weiterhin mit dem Mausrad oder den Pfeiltasten scrollen.

3. Wenden Sie das im obigen Fehlerbericht vorgeschlagene Update manuell an und testen Sie es gründlich, wenn es andere Probleme verursacht.

4. Warten Sie auf eine offizielle Lösung. Es ist für jQuery UI 1.9 geplant, obwohl es in der Vergangenheit einige Male verschoben wurde.

5. Wenn Sie sicher sind, dass dies in jedem Browser geschieht, können Sie diese Hacks in die Ereignisse der betroffenen Draggables einfügen, um die Berechnungen zu korrigieren. Es sind jedoch viele verschiedene Browser zu testen, daher sollte es nur als letzter Ausweg verwendet werden:

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

Diese Lösung funktioniert, ohne die Position von irgendetwas anzupassen. Sie klonen einfach das Element und machen es absolut positioniert.

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

Der Helfer kann eine Funktion sein, die das DOM-Element zum Ziehen zurückgeben muss.

Das hat bei mir funktioniert:

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

Entschuldigen Sie, dass Sie eine weitere Antwort geschrieben haben. Da keine der Lösungen in der obigen Antwort von mir verwendet werden konnte, habe ich viel gegoogelt und viele frustrierende kleinere Änderungen vorgenommen, bevor ich eine andere vernünftige Lösung gefunden habe.

Dieses Problem scheint auftreten , wenn jede der übergeordneten Elemente positionauf ‚relativ‘. Ich musste mein Markup neu mischen und mein CSS ändern, aber durch Entfernen dieser Eigenschaft von allen Eltern konnte ich .sortable()in allen Browsern ordnungsgemäß arbeiten.

Es sieht so aus, als ob dieser Fehler sehr häufig auftritt und jedes Mal gibt es eine andere Lösung. Nichts davon oder irgendetwas anderes, was ich im Internet gefunden habe, hat funktioniert. Ich verwende jQuery 1.9.1 und Jquery UI 1.10.3. So habe ich es behoben:

$(".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();
  }
});

Funktioniert in FF, IE, Chrome, ich habe es noch nicht in anderen Browsern getestet.

Ich lösche den Überlauf:

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

Und es funktioniert perfekt!

Dieser Fehler wurde auf http://bugs.jqueryui.com/ticket/6817 verschoben und scheint seit ungefähr 5 Tagen (16. Dezember 2013 oder so ungefähr) endlich behoben worden zu sein. Derzeit wird empfohlen, den neuesten Entwicklungs-Build von http://code.jquery.com/ui/jquery-ui-git.js zu verwenden oder auf Version 1.10.4 zu warten, die diesen Fix enthalten sollte .

Bearbeiten: Es scheint, dass dieses Update jetzt Teil von http://bugs.jqueryui.com/ticket/9315 ist, das erst in Version 1.11 gelöscht werden soll. Die Verwendung der oben verlinkten Versionsverwaltungsversion von jQuery scheint das Problem für mich und @Scott Alexander zu beheben (Kommentar unten).

Scheint bemerkenswert, dass dieser Fehler so lange behoben sein sollte. Für mich ist es ein Problem unter Safari und Chrome (dh den Webkit-Browsern), aber weder unter IE7 / 8/9 noch unter Firefox, die alle einwandfrei funktionieren.

Ich fand, dass das Setzen von absolut oder fest, mit oder ohne! Wichtig, nicht hilfreich war. Am Ende fügte ich meiner Drag-Handler-Funktion eine Zeile hinzu:

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

Ich hatte erwartet, dass ich diese Zeile webkit-spezifisch machen musste, aber seltsamerweise funktionierte sie überall gut. (Erwarten Sie bald einen Kommentar von mir, der sagt: "Ähm, nein, tatsächlich hat er alle anderen Browser durcheinander gebracht."

Was ich getan habe ist:

$("#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);
         }
        });

Ich bin mir nicht ganz sicher, ob dies in jedem Fall funktionieren wird, aber diese Problemumgehung, die ich gerade für mich in all den verschiedenen Situationen durchgeführt habe, die ich testen musste (und in denen die zuvor hier und anderswo angegebenen Lösungsvorschläge alle fehlgeschlagen sind).

(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));

(Ich habe es an den jQuery.ui-Tracker gesendet, um zu sehen, was sie darüber denken. Es wäre cool, wenn dieser 4 Jahre alte Fehler endlich behoben werden könnte: /)

Ich verwende JQuery Draggable unter Firefox 21.0 und habe das gleiche Problem. Der Cursor bleibt einen Zentimeter über dem Hilfsbild. Ich denke, dies ist ein Problem in der Jquery selbst, das noch nicht gelöst wurde. Ich habe eine Problemumgehung für dieses Problem gefunden, bei der die Eigenschaft "cursorAt" der Dragable verwendet wird. Ich habe es wie folgt verwendet, aber man kann dies entsprechend seiner Anforderung ändern.

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

Hinweis: Dies gilt für alle Browser. Überprüfen Sie nach Verwendung dieses Codes Ihre Seite in allen Browsern, um die richtigen Positionen für links und oben zu erhalten.

Dies hat bei mir funktioniert, nachdem ich alles angepasst habe, was ich über das Problem gelesen habe.

$(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 ist das übergeordnete Element oder der Vorfahr mit Überlauf: auto;

Berechnet die Position des Bildlaufelements und erhöht die Position des Hilfsprogramms bei jedem Verschieben / Ziehen.

Hoffe das hilft jemandem, da ich viel Zeit damit verschwendet habe.

Dies scheint die Problemumgehung zu tun, ohne dass die Position verwendet werden muss: absolut im übergeordneten Element :)

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

Ich habe es geschafft, das gleiche Problem beim Hinzufügen zu beheben display: inline-block zu den gezogenen Elementen

Das Hinzufügen position: relativehat bei mir NICHT funktioniert (jQuery überschreibt es mitposition: absolute Drag-Start)

Verwendete jQuery-Versionen:

• jQuery - 1.7.2
• jQuery UI - 1.11.4

Ich hatte das gleiche Problem und stellte fest, dass dies alles auf eine Bootstrap-Navbar-Klasse "navbar-fixed-top" mit fester Position zurückzuführen war, die sich um <body>60 Pixel tiefer als <html>oben bewegte . Als ich also ziehbare Formulare auf meiner Site verschob, erschien der Cursor 60 Pixel über dem Formular.

Sie können sehen, dass Sie im Chrome-Debugging-Tool in der Elements-Oberfläche auf das <body>Tag klicken und eine Lücke zwischen oben und dem Körper sehen.

Da ich diese Navigationsleiste in allen meinen Anwendungen verwende und meinen Initialisierungsaufruf nicht so ändern wollte, dass sie für jedes Formular gezogen wird (gemäß der DarthJDG-Prozedur). Ich habe beschlossen, das ziehbare Widget auf diese Weise zu erweitern und meiner ziehbaren Initialisierung einfach ein yOffset hinzuzufügen.

(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);

Wenn ich nun das ziehbare Element / Formular in einer Site mithilfe der Bootstrap-Navigationsleiste initialisiere:

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

Natürlich müssen Sie experimentieren, um das richtige yOffset für Ihre eigene Site zu ermitteln.

Trotzdem danke an DarthJDG, der mir die richtige Richtung gezeigt hat. Prost!

Ich habe die Verwendung von jQueryUi draggable beendet und ein besseres Plugin namens jquery.even.drag verwendet , eine viel kleinere Codegröße, ohne den ganzen Mist, den jQueryUI hat.

Ich habe eine Demoseite mit diesem Plugin in einem Container erstellt, dessen Position: fest ist

Demo

Hoffe das hilft jemandem, denn dieses Problem ist GROSS.

Ich hatte ein ähnliches Problem, nur mit einem bestimmten IE 10 unter Windows 8. Alle anderen Browser funktionierten einwandfrei. Das Entfernen von cursorAt: {top: 0} hat das Problem behoben.

Ich habe hier verschiedene Antworten ausprobiert, einschließlich der Aktualisierung von jQuery, und festgestellt, dass dies für mich funktioniert. Ich habe dies auf neuestem Chrome und IE getestet. Ich denke, dies wird ein Problem mit unterschiedlichen Lösungen sein, abhängig von Ihrem UI-Layout.

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

Warum nicht die Cursorposition einnehmen? Ich benutze das sortierbare Plugin und behebe es mit diesem Code:

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

Verwenden appendTo: "body'und Position einstellen mit cursorAt. Das funktioniert gut von mir.

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'

Ich benutze oben ein klebriges Navi und dachte, das war der Grund für das Scroll-Problem, das alle anderen zu haben scheinen. Ich habe die Idee aller anderen mit cursorAt ausprobiert, ich habe versucht, sie einzudämmen, und nichts hat funktioniert, außer dass ich meinen HTML-Überlauf im CSS aufgehoben habe! Wahnsinnig, wie ein bisschen CSS alles vermasselt. Das habe ich getan und es funktioniert wie ein Zauber:

html {
  overflow-x: unset;
}

body {
  overflow-x: hidden;
}