jQuery UI sortierbar() - listitem springt nach oben in Safari und Chrome

Question

Ich habe eine sortierbare ungeordnete Liste am Ende meiner Seite, die perfekt in Firefox funktioniert. In Safari/Chrome springt das gegriffene Listenelement jedoch sofort an den Anfang der Seite, wenn ich es ziehen möchte, so wie das UL über dem Fenster ist. Weiß jemand, was hier vor sich geht?

Danke. Lex.

Hier ist der Code:

HTML (und PHP):

<ul id="list"> 
    <? 
     foreach($downloads as $download) 
     { 
      echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->title."</a></li>"; 
     } 
    ?> 
</ul> 

CSS:

ul#list { 
    padding: 10px 0; 
    display: block; 
} 
ul#list li { 
    background: #fff; 
    padding: 10px; 
    color: #bc1e2c; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    font-weight: bold; 
    margin: 10px 0; 
    display: block; 
} 

ul#list li:hover { 
    background: #212121; 
    color: #fff; 
    cursor: move; 
} 

JS:

$(".alter-content ul#list").sortable({ 
    update : saveSortorder, 
    containment: 'parent' 
}); 

Answer 1

Hier ist das Update ich irgendwo gefunden online ... vielleicht sogar auf SO. Funktioniert bei mir.

elements.itemList.sortable({ 
    'start': function (event, ui) { 
     //jQuery Ui-Sortable Overlay Offset Fix 
     if ($.browser.webkit) { 
      wscrolltop = $(window).scrollTop(); 
     } 
    }, 
    'sort': function (event, ui) { 
     //jQuery Ui-Sortable Overlay Offset Fix 
     if ($.browser.webkit) { 
      ui.helper.css({ 'top': ui.position.top + wscrolltop + 'px' }); 
     } 
    } 
}); 

Answer 2

Für mich ist das Problem kam von CSS-Überlauf auf dem Körper:

body { overflow-x: hidden; } 

Entfernen dieser Zeile das Problem vollständig beheben.

Answer 3

Ich hatte genau das gleiche Problem mit sortierbaren Elementen in Chrome nach oben springen, während der gleiche Code in Firefox funktionierte. Das Problem war, dass das enthaltene Element keine explizite Höhe hatte. Sobald ich eine Höhe hinzugefügt habe, sprang der Gegenstand nicht mehr herum.

Answer 4

Ich hatte das gleiche Problem. Es funktionierte gut in Firefox, aber sprang in Safari und Chrome. Ich habe es schließlich behoben, indem ich overflow: auto; zu der unsortierten Liste in meinem CSS hinzufüge.

Ich musste nicht einmal die Höhe des UL angeben.

Answer 5

Für mich geschah dies, weil ein Übergang/Animation in der Zeilenposition gesetzt wurde. Durch das Entfernen des Übergangs wurde das Problem behoben.

Answer 6

Scheint wie jQuery UI 1.9.2 das Problem gelöst.

Wenn Sie die Bibliothek nicht ändern können, gibt es eine Problemumgehung einschließlich einer einfachen Bildlaufleiste. Die Idee ist einfach:

• Behalten Sie die vorherige Bildlaufposition bei jedem Bildlauf.
• Scrollen Sie zurück zur vorherigen Position, wenn Sie Ihr Element ziehen.

Hier gehen Sie;

var lastScrollPosition = 0; //variables defined in upper scope 
var tempScrollPosition = 0; 

window.onscroll = function() { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms. 
    }, 250)); 

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
}; 

$("#YourSortablePanel").sortable({ 
    start: function (event, ui) { 
     $(document).scrollTop(tempScrollPosition); 
    } 
}); 

Answer 7

Wenn Sie es 'revert' Option nur entfernen oder Set 'zurückzukehren: false' in den sortierbar Optionen. Es funktioniert für mich. Danke.