Regroupement d'objets déplaçables avec jquery-ui draggable

Question

Je veux utiliser jquery déplaçable/drop, pour permettre à l'utilisateur de sélectionner un groupe d'objets (chacun a une case à cocher dans le coin), puis faites glisser tous les objets sélectionnés en tant que groupe...

Je ne peux pas comprendre pour la vie de moi comment le faire haha.

Voici ce que je pense, va conduire à une solution viable, sur chaque déplaçable d'un objet, utilisez la méthode start() de l'événement et en quelque sorte de prendre tous les autres objets sélectionnés et les ajouter à la sélection

J'étais également en compte juste faire l'objet déplacé ressembler à un groupe d'objets (images, de sorte qu'un tas de photos peut-être) pour des raisons de performances. Je pense que l'utilisation de selection des fonctionnalités pourraient tomber si vous faites glisser plusieurs dizaines d'objets à la fois, n'est que le son comme une meilleure idée?

Answer 1

Vous pouvez utiliser le déplaçable de l' helper option pour faire glisser les groupes d'éléments.

Par exemple, si votre draggables avoir des cases à cocher, vous pouvez retourner les éléments sélectionnés à partir de la fonction d'assistance de la sorte:

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
});

Démo

J'ai configuré une démo avec glisser des images avec des cases à cocher et un peu de liquide de mise en page:

http://jsbin.com/awagi

Note: je ne l'ai testé dans Firefox; je soupçonne que IE n'aime pas certains de la CSS.

Answer 2

Notion De Performance:

Faire une invisible "groupe de l'objet". Lorsque les articles sont vérifiés, rendre les enfants de l'objet de groupe, si l'option est désactivée, les définir comme des enfants du corps du document, ou statique parent ou quoi que ce soit. Vous aurez à traduire les objets en position pour être sûr de ne pas sauter partout, aussi attacher/détacher votre souris gestionnaires d'événements pour les enfants du groupe à mesure que vous ajoutez/supprimer.

Lorsque vous obtenez une souris haut/bas de l'événement sur l'un de ces enfants, ce que vous aurez à déplacer est en fait que l'objet du groupe.

Cela devrait rendre plus simple dans l'ensemble.

Answer 3

C'est la chose exacte que j'essaie de faire. Jusqu'ici, je n'ai pas réussi, mais j'ai découvert que ce gars l'avait fait d'une manière très compliquée. vous pourriez le vérifier, vous pourriez peut-être faire quelque chose avec ça.

Cela devrait être une fonctionnalité dans draggable. J'espère qu'ils le mettent en œuvre plus tôt que plus tard

Answer 4

Ce que j'ai fait pour ce qui est créé une fonction qui vous donne l'esclave / maître des éléments, ce qui crée un bind() de la fonction pour le maître (je suis le seul à permettre une traînée de le maître dans ce cas, vous pouvez contourner cela, j'en suis sûr), ce qui rend l'esclave suivre autour de standard en utilisant jQuery css.

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

Je suppose que je vais poster plus de cela, une fois que j'ai un exemple de travail. Tel qu'il est, c'est de travailler pour moi. Ce qui manque, c'est une façon de faire des appels de chevauchement(slave, master) avec les éléments que vous voulez regrouper. Je fais cela en un vraiment spécifique. Vous pouvez intelligente une façon de le faire, j'en suis sûr.