jQuery déplaçable montre l'assistant au mauvais endroit lorsque la page est déroulée

Question

J'utilise jQuery déplaçable et droppable pour un travail de planification de système que je suis en développement. Les utilisateurs de glisser des emplois à un autre jour ou l'utilisateur, puis les données sont mises à jour à l'aide d'un peu d'ajax type d'appels.

Tout fonctionne bien, sauf que quand j'ai faites défiler la page principale (Emplois apparaissent sur un grand week planner qui dépasse le bas de ma fenêtre de navigateur). Si j'essaie de le faire glisser un élément déplaçable ici, l'élément apparaît au-dessus de mon curseur de la souris le même nombre de pixels que j'ai défile vers le bas.. L'état de pointage fonctionne toujours très bien et la fonctionnalité est coup sur, mais il a l'air terrible.

J'utilise les dernières versions de jQuery et jQuery UI.

Je suis sûr qu'il y a une simple fonction offset-je besoin d'ajouter, mais je ne sais pas où pour l'appliquer, ou si il ya une meilleure façon. Je vais inclure une partie du code, mais c'est très standard.

$('.job').draggable({

    zIndex: 20,
    revert: 'invalid',
    helper: 'original',
    distance: 30,
    refreshPositions: true,
    });

Merci! :)

Answer 1

Cela pourrait être un problème de rapport, il a été autour depuis un certain temps: http://bugs.jqueryui.com/ticket/3740

Il semble se produire sur tous les navigateurs que j'ai testé (Chrome, FF4, IE9). Il existe quelques façons dont vous pouvez contourner ce problème:

1. Utiliser position:absolute; dans votre css. Éléments en position absolue ne semble pas être affectée.

2. Assurez-vous que l'élément parent (cas si c'est le corps) a overflow:auto; ensemble. Mon test a montré que cette solution résout le poste, mais il désactive le défilement automatique de la fonctionnalité. Vous pouvez toujours faire défiler à l'aide de la molette de la souris ou les touches fléchées.

3. Appliquer le correctif proposé ci-dessus, au rapport de bogue manuellement et test bien si elle provoque d'autres problèmes.

4. Attendre un correctif officiel. Il est prévu de l'INTERFACE utilisateur de jQuery 1.9, même si elle a été reportée à quelques reprises dans le passé.

5. Si vous êtes sûr qu'il se passe sur tous les navigateurs, vous pouvez mettre ces hacks dans le affectée draggables' événements pour corriger les calculs. Il ya beaucoup de différents navigateurs pour tester, donc il ne devrait être utilisé qu'en dernier recours:

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

Answer 2

Cette solution fonctionne sans ajuster le positionnement de quoi que ce soit, il vous suffit de cloner l'élément et de le rendre absolument positionné.

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

L'assistant peut être une fonction qui doit renvoyer l'élément DOM avec lequel glisser.

Answer 3

Cela a fonctionné pour moi:

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

Answer 4

On dirait que ce bogue vient très souvent et qu’il ya chaque fois une solution différente. Aucune de ce qui précède, ou quoi que ce soit que j'ai trouvé sur Internet a fonctionné. J'utilise jQuery 1.9.1 et Jquery UI 1.10.3. Voici comment je l'ai corrigé:

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

Fonctionne dans FF, IE, Chrome, je ne l'ai pas encore testé dans d'autres navigateurs.

Answer 5

Ce bug s'est déplacé à http://bugs.jqueryui.com/ticket/6817 et, comme de sur 5 jours (Dec 16, 2013 ou penser de cela) semble finalement avoir été corrigé. La suggestion est d'utiliser la dernière version de développement de http://code.jquery.com/ui/jquery-ui-git.js ou attendre la version 1.10.4 qui contiendra ce correctif.

Edit: Il semble que ce correctif peut maintenant faire partie de http://bugs.jqueryui.com/ticket/9315 ce qui n'est pas prévue à goutte jusqu'à la version 1.11. À l'aide de la ci-dessus lié à la source de contrôle de la version de jQuery ne semble corriger le problème pour moi et @Scott Alexander (commentaire ci-dessous).