2009-07-10 9 views
3

Est-il possible de faire glisser les éléments de la liste de sélection de l'interface utilisateur jQuery entre deux listes, dont l'une est dans un dialogue jQuery UI et l'autre dans un autre? J'essaie de créer un dialogue où les utilisateurs peuvent faire glisser des champs de formulaire d'un dialogue dans un formulaire qui est sur la page, mais je ne peux pas faire glisser les éléments hors de la bordure de dialogue.Interface utilisateur jQuery Sortable et dialogue

Merci à l'avance

Modifier

Il semble que le traînage et les excréments fonctionne vraiment, mais vous ne pouvez pas voir l'article une fois que vous allez au-delà du dialogue. Ce n'est pas vraiment idéal. (Voir redsquare's demo)

Autre Modifier

Le principal div qui est créé pour le dialogue a overflow:hidden sur elle. Si je le désactive dans Firebug, le glisser fonctionne correctement, donc je suppose que je pourrais en quelque sorte surcharger cela, mais je suspecte que cela me cause plus de problèmes.

+0

Tom - mis à jour ma réponse fyi. – redsquare

Répondre

5

Démo here.

Est-ce que cela reproduit le problème? Je suis capable de faire glisser entre les deux, mais vous perdez l'aide lorsque vous faites glisser hors ou dans le dialogue. Je pense qu'il peut avoir besoin d'ajuster l'indexation en z quand vous vous déplacez ou dans le dialogue mais il est toujours fonctionnel ... juste!

Je vais essayer de trier cela quand j'ai un peu plus de temps plus tard. MISE À JOUR: modifier l'aide de l'index z (bien aider à glisser de la liste vers le dialogue - la première fois!) ... le rendra meilleur plus tard! voir here

NOUVELLE MISE À JOUR Nouvelle démonstration, j'ai dû utiliser l'assistant pour m'assurer que l'index z restait correct. Fonctionne maintenant here

+0

Merci - Je n'avais pas réalisé que le glisser fonctionnait toujours, j'avais supposé que parce que je ne pouvais pas voir l'objet en train de glisser, ça ne fonctionnait pas du tout. Mais j'aimerais pouvoir voir l'article traîné à tout moment idéalement. –

+0

merci pour votre aide, c'est parfait –

1

J'ai eu un problème similaire avec les éléments de tri entre les boîtes de dialogue, donc grâce à redsquare pour le code. Ont été en mesure de simplifier le code un peu plus loin, à ce bit autonome (sans majoration supplémentaire nécessaire):

this.sortables = $(sortSelector).sortable({ 
    connectWith: sortSelector, 
    zIndex : 99999, 
    helper: function() { 
     var helper = $('.sortHelper li'); 
     if (!helper.length) { 
      helper = $('<ul><li></li></ul>') 
       .addClass('sortHelper') 
       .appendTo('body') 
       .find('li') 
       .css({ 'z-index': 9999 }); 
     } 

     return helper; 
    }, 
    start: function(event, ui) { 
     ui.helper.text(ui.item.text()); 
    } 
}); 

Démo à this jsfiddle.