Problème absolu de 'handle' de jquery sortable positionné - N'influence pas le tri en dehors de la portée de l'élément triable

Question

J'ai un problème que je n'arrive pas à résoudre. J'ai une liste d'articles semblable à Basecamp avec un petit menu sur la gauche avec les icônes Drag, Edit et Trash.

La poignée est là. Il est assis en dehors de la portée de l'élément triable, et c'est pourquoi il n'influence pas du tout le tri.

Comme vous pouvez le voir, mon icône glisser est sur la gauche. Il est en dehors de la portée {LI}. Les terminaisons LIs où le caractère se termine, de sorte que le Handle est sorti de son parent et n'a aucune influence sur le tri et ne l'initiera pas.

Lorsque je le fais glisser mais que je déplace ma souris à l'intérieur des limites du LI, cela l'influence et le classe comme il le devrait.

Que puis-je faire? Je me suis cassé la tête et j'ai recherché une propriété d'une poignée de décalage, ou n'importe quelle façon de définir pour lui que mon manche est hors de votre portée.

J'espère que n'importe qui a fait face à cette chose dans le passé et pourrait aider :) Je pense mettre une image de balle bg, et de cette manière pour donner au LI plus d'espace à sa gauche. pourrait faire l'affaire ... :)

Merci

Answer 1

j'ai pu résoudre ce problème en réécrivant la méthode qui détermine si le curseur est sur l'élément ou non. Puisque ma liste était verticale comme la vôtre, j'ai arraché les contrôles pour la position horizontale afin qu'elle vérifie seulement la position verticale. De cette façon, peu importe où le curseur est horizontal.

Il suffit de mettre cela après vos principaux jquery.ui.js comprennent et avant votre code sortable pour remplacer la méthode:

// UI Fix for draggable 
$.extend($['ui']['sortable'].prototype, { 
    _intersectsWithPointer: function(item) { 

     var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height), 
      verticalDirection = this._getDragVerticalDirection(), 
      horizontalDirection = this._getDragHorizontalDirection(); 

     if (!isOverElementHeight) 
      return false; 

     return this.floating ? 
      (((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1) 
      : (verticalDirection && (verticalDirection == "down" ? 2 : 1)); 

    } 
}); 

Il est évident que cette fonctionnalité casse pour le tri horizontal, de sorte que vous voulez seulement inclure dans votre cas particulier.

Chère équipe d'interface utilisateur jQuery: Appelez pour la fonctionnalité de gérer cela en utilisant une option. :)

SammyK

Answer 2

J'ai eu ce même problème.

j'ai remarqué il y a un bug ouvert présenté ici: http://bugs.jqueryui.com/ticket/3022#comment:9

En plus d'une demande de tirage qui prétend résoudre le problème: https://github.com/jquery/jquery-ui/pull/915

Il est un peu une douleur qu'il n'a pas encore été fixe encore après toutes ces années.

Quoi qu'il en soit, je pensais faire une modification comme le suggère SammyK, mais j'ai remarqué qu'il y avait une option axis dans la version 1.10.3. Je ne suis pas sûr si cela existait dans les versions précédentes de l'interface utilisateur jQuery.

Mais la mise en axis résout le problème pour moi:

$('.items').sortable({ 
    containment:'parent', 
    handle:'.move', 
    opacity:0.5, 
    axis:'y' 
}); 

Ma poignée peut maintenant résider en dehors de mes articles draggable, mais toujours être en mesure de faire glisser les éléments vers le haut et vers le bas correctement.