JQuery UI, La combinaison Sortable avec largable

Question

J'essaie de combiner JQuery UI triables avec largable pour créer plusieurs pages pour laisser tomber et les choses de tri. J'ai installé une entrée de blog avec une démo stand-long ici:

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

et voici un jsFiddle:

http://jsfiddle.net/VUuyx/

Notez que vous pouvez faire glisser pour trier les boîtes, même en autres colonnes. Vous pouvez également cliquer sur les boutons de page pour changer de page. Mon problème réside dans la combinaison de ces deux caractéristiques:

En utilisant largable, j'ai permis à l'utilisateur de faire glisser une boîte à un bouton la page, la page sera alors passer, et l'utilisateur peut terminer glisser sur la page nouvellement révélée. Le problème est que lorsque la page bascule, la première colonne qui apparaît sous la boîte traînée n'a pas c'est sur feu d'événement. Vous devez faire glisser vers une autre colonne, puis revenir à la première colonne pour afficher l'espace réservé.

Je ne suis pas sûr, mais je pense que je dois effacer les événements ou les déclencher manuellement. Le problème semble provenir du fait que la boîte traînée est sur la colonne quand elle est rendue visible.

Pouvez-vous aider avec ce dilemme ésotérique?

Merci!

Mise à jour:

J'ai réfléchi arounds de travail possibles pour cela. Michal a suggéré de déclencher la méthode de rafraîchissement, ce qui ne résout en fait pas le problème, mais m'a fait réfléchir aux problèmes de l'événement.

Il semble que lorsque vous déplacez la souris et retournez à nouveau, les événements appropriés se déclenchent. Peut-être que si je peux déclencher manuellement l'événement mouseout pour la première colonne, la réinitialisation permettra à l'événement mouseover de se déclencher correctement.

J'ai essayé ceci:

$(".column:first").trigger('mouseout'); 

Mais je ne pense pas que ce soit la même chose que triables événement sur l » de. Peut-être que je devrais tirer cet événement?

Answer 1

Oui ajout de $ ('. Column'). Sortable ("refresh"); à fin de la fonction show_page (id) a fonctionné pour moi (testé uniquement dans champ de mines firefox):

function show_page(id) { 
    $('.page').removeClass('page_active'); 
    $('#page_'+id).addClass('page_active'); 
    $('.column').sortable("refresh"); 
} 

Answer 2

Peut-être que je suis mal compris le problème, mais je ne pense pas que cela n'a rien à voir avec le " changement de page ". Si vous activez les deux pages en même temps et que vous essayez de faire glisser "Box 1" à une position au-dessus de "Box 4", vous verrez que cela ne déclenche pas que Sortable Box 4 a reçu le Draggable jusqu'à ce que vous allez ci-dessous "Box 4". Cela ne résout pas votre problème, mais peut-être vous aidera à trouver un meilleur endroit pour la solution.Voir pour un JSFiddle qui démontre ce que je veux dire.

Answer 3

Au moins pour la baisse descendante, je pense que la solution est quelque part dans la définition de la classe de boîte à dragable et le lier à l'objet triable.

$(".box").draggable({ 
    tolerance: 'point', 
    connectToSortable: '.column', 
    snap:false, 
    helper : 'clone', 
}); 

Cet exemple crée un double de la boîte, mais il ne me permet de faire glisser la case 1 à la page 2 et faites-le glisser vers le bas au-dessus de la case 5 et obtenir placé lentement dans la première place. C'est très sensible cependant. Vous devrez peut-être ajuster les grilles et les aligner pour que le système fonctionne de manière cohérente pour l'utilisateur occasionnel.

Je peux certainement imaginer qu'un objet triable ne s'attend pas à ce que quelque chose descende du haut, car il s'attend à ce que les choses soient triées à l'intérieur du conteneur. Droppable, d'un autre côté, s'attend à ce que les choses entrent de n'importe quelle direction.

Answer 4

Ajout @ La réponse de edtechdev à tolerance: 'intersect quelque chose produit que je pensais peut vous satisfaire, Whit:

$(".column").sortable({ 
    connectWith: '.column', 
    opacity: 0.4, 
    tolerance: 'intersect', //<--changed 
    placeholder: 'place_holder', 
    helper: function(event, el) { 
     var myclone = el.clone(); 
     $('body').append(myclone); 
     return myclone; 
    }, 
}).disableSelection(); 

// ... 

function show_page(id) { 
    $('.page').removeClass('page_active'); 
    $('#page_'+id).addClass('page_active'); 
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added 
} 

Answer 5

Découvrez glisser-déposer portail construit en utilisant jQuery et Asp.Net MVC, il a tous la mise en œuvre dans les messages de blog: http://lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp-net-mvc-microsoft-ajax-client-templates-and-jquery-with-drag-and-drop-widget-personalization/

Answer 6

Sortable dispose d'une option non documentée refreshPositions qui met automatiquement à jour la position de vos droppables lorsqu'ils sont également triables. Cela empêche l'espace réservé d'être droppable au lieu de la droppable réelle.