grouper des objects déplaçables avec jquery-ui draggable

Je veux utiliser jquery draggable / droppable pour permettre à l’utilisateur de sélectionner un groupe d’objects (chacun ayant une case à cocher dans le coin), puis faites glisser tous les objects 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 utilisable, sur chaque object déplaçable, utiliser l’événement start () et saisir d’une manière ou d’une autre tous les autres objects sélectionnés et les append à la sélection

J’envisageais aussi de faire en sorte que l’object déplacé ressemble à un groupe d’objects (ce sont des images, donc une stack de photos peut-être) pour des raisons de performances. Je pense que l’utilisation de la fonctionnalité draggable pourrait tomber si vous faites glisser plusieurs dizaines d’objects à la fois, cela vous semble-t-il une meilleure idée?

    Vous pouvez utiliser l’option d’ helper de draggable pour helper glisser des groupes d’éléments.

    Par exemple, si vos unités de contrôle ont des cases à cocher, vous pouvez renvoyer les éléments sélectionnés à partir de la fonction d’aide comme suit:

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

    Démo

    J’ai mis en place une démo avec des images déplaçables avec des cases à cocher et une mise en page quelque peu fluide. Cliquez sur “Exécuter l’extrait de code” en bas pour voir le résultat:

     $(function() { $('#dragSource li').draggable({ helper: function() { var selected = $('#dragSource input:checked').parents('li'); if (selected.length === 0) { selected = $(this); } var container = $('
    ').attr('id', 'draggingContainer'); container.append(selected.clone()); return container; } }); $('#dropTarget').droppable({ tolerance: 'pointer', drop: function(event, ui) { $(this).append(ui.helper.children()); } }); $('#selectAll').click(function() { $('#dragSource input').prop('checked', true); return false; }); $('#selectNone').click(function() { $('#dragSource input').prop('checked', false); return false; }); $('#selectInvert').click(function() { $('#dragSource input').each(function() { var $this = $(this); if ($this.prop('checked')) { $this.prop('checked', false); } else { $this.prop('checked', true); } }); return false; }); });
     body { font-family: sans-serif; overflow-x: hidden; } div { margin: 5px; padding: 0; } ul { margin: 0; padding: 0; } li { list-style: none; padding: 0; margin: 0; float: left; white-space: nowrap; } #selectActions span, #selectActions li { float: left; padding: 5px; } .droppableContainer { width: 48%; float: left; min-height: 200px } .droppableContainer li { height: 90px; width: 110px; margin: 2px; background-color: white; padding-bottom: 4px; } .droppableContainer img { width: 90px; max-height: 90px; max-width: 90px; width: 90px; vertical-align: middle; } .droppableContainer input { height: 90px; vertical-align: middle; } #draggingContainer { width: 48%; } #draggingContainer input { visibility: hidden; } #dropTarget { border: 3px dashed grey; } #dropTarget input { visibility: hidden; } 
        
    Select:

    Idée de performance:

    Créez un object de groupe invisible. Lorsque les éléments sont cochés, définissez-les comme des enfants de l’object de groupe, lorsqu’ils sont désélectionnés, définissez-les en tant qu’enfants du corps du document ou du parent statique ou autre. Vous devrez traduire la position des objects pour vous assurer qu’ils ne sautent pas, attacher / détacher vos gestionnaires d’événements de souris aux enfants du groupe lorsque vous les ajoutez / supprimez.

    Lorsque vous obtenez un événement de montée / descente de la souris sur l’un des enfants, ce que vous allez déplacer est en fait cet object de groupe.

    Cela devrait le rendre plus simple dans son ensemble.

    C’est la chose exacte que j’essaie de faire. Jusqu’à présent, je n’ai pas réussi, mais j’ai trouvé ce type très compliqué. vous pourriez vérifier que peut-être vous pourriez faire quelque chose avec ça.

    Cela devrait être une fonctionnalité dans draggable. J’espère qu’ils l’implémenteront plus tôt que plus tard

    Ce que j’ai fait pour cela a créé une fonction à laquelle vous donnez les éléments esclaves / maîtres, ce qui crée une fonction bind () pour le maître (je ne permets que le glisser du maître dans ce cas, vous pouvez contourner cela je suis sûr), ce qui rend l’esclave le suivre en utilisant css jQuery standard.

      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 posterai plus à ce sujet une fois que j’ai un exemple de travail. En l’état, cela fonctionne pour moi. Ce qui manque, c’est un moyen d’appeler le chevauchement (esclave, maître) avec les éléments que vous souhaitez regrouper. Je le fais de manière très spécifique. Vous pouvez trouver un moyen intelligent de le faire, j’en suis sûr.