jQuery UI sortable de défilement helper élément de décalage Firefox problème

Question

J'ai un problème avec une INTERFACE utilisateur de jQuery 1.7.2 liste triable dans Firefox 3.6, IE7-8, beau travail. Quand je suis défile vers le bas un peu, l'aide de l'élément semble avoir un décalage de la même hauteur que je suis défilez vers le bas à partir du pointeur de la souris qui fait qu'il est impossible de voir l'élément sur lequel vous avez initialement commencé à glisser. Comment puis-je le résoudre ou contourner le problème? Si il n'y a pas de fixer ce qui est une très bonne alternative glisser en mesure de plugin?

Voici mes paramètres d'initialisation pour le triable.

$("#sortable").sortable( {placeholder: 'ui-state-highlight'  } );
$("#sortable").disableSelection();

Answer 1

Si vous souhaitez empêcher la détection de browser, le CSS seule solution est de définir la norme ul ou un conteneur de style à l' overflow: auto. Si vous regardez le code source grâce à firebug, c'est le moyen de jQuery t-il dans leur exemple.

Answer 2

À l'aide de overflow: auto; n'était pas une option pour moi. J'ai été en mesure de contourner ce problème avec cette sort gestionnaire d'événements:

$(...).sortable({
    ...
    sort: function(event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
            ui.helper.css({'top' : top + 'px'});
        }
    },
    ...
});

Il n'est pas parfait, mais il ne nécessite pas de navigateur en reniflant. Testé avec IE8, Chrome et Firefox.

Edit: C'est à l'aide de jQuery 1.10.0 et jQuery UI 1.10.3.

Answer 3

J'ai été voir ce problème et a pu le résoudre en supprimant la règle css position:relative de l'un de l'contenant des divs sur ma page. Voir aussi: http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff

Answer 4

J'ai aussi eu ce problème et il fixe avec le code suivant:

var wscrolltop = 0;
$sortable_elements.sortable({ 
    start: function(event, ui) {
        wscrolltop = $(window).scrollTop();
    },
    sort: function(event, ui) {                   
        ui.helper.css({'top' : ui.position.top + wscrolltop + 'px'});
    }
});

J'ai découvert, qu'il y a toujours un problème si vous faites défiler avec votre sortable-élément. Peut-être que quelqu'un a une solution pour cela?

Mise à JOUR: La solution est:

$sortable_elements.sortable({ 
    connectWith: '#personal-favs ul.fitems',
    sort: function(event, ui) {  
        ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
    }
});

Mais encore - si vous partez de la liste, le tri-événement semble s'arrêter.

Answer 5

Vous devez également tenir compte du fait ceci est spécifique à firefox, voici le bout de code que j'utilise - je me suis dirigé la bonne façon de Harris solution. J'ai rencontré ce problème w/o à l'aide de l'aide quand l'sortable était relativement conteneur positionné.

  var options = { 
   handle: '.mover', 
   update:updateSorting 
 };
  var userAgent = navigator.userAgent.toLowerCase();
  if(userAgent.match(/firefox/)) {
    options["start"] = function (event, ui) { ui.item.css('margin-top', $(window).scrollTop() ); };
    options["beforeStop"] = function (event, ui) { ui.item.css('margin-top', 0 ); };
  }
  $("#" + list_id+"").sortable(options);
  $("#" + list_id+"").disableSelection();

Vous pouvez également faire cette vérification sur le serveur et ensuite 2 appels différents selon le navigateur.