jQuery Sortable - Sélectionnez et faites glisser plusieurs éléments de liste

Question

J'ai une conception où j'ai une liste de "cases disponibles", aux utilisateurs de prendre les boîtes en les faisant glisser à partir de la "cases disponibles" liste de leurs "Mes Boîtes" à la liste.

Les utilisateurs plus souvent que de ne pas en prendre plusieurs boîtes à la fois (max 20), une fois qu'ils ont fini avec les cases qu'ils ont faites glisser vers le "cases disponibles" liste de les retourner.

jQuery sortable me permet de glisser une case à un moment qui, à partir d'un point de vue utilisateur n'est pas souhaitable. J'ai été incapable de trouver une solution simple à ce problème.

J'ai peut-être à venir avec un autre de l'INTERFACE utilisateur de la méthode entièrement, mais d'abord, quelqu'un aurait-il des suggestions sur la façon dont cela pourrait se faire?

Merci!

Answer 1

Solution De Travail

tl;dr: reportez-vous à ce Violon pour un travail de réponse.

---

J'ai cherché partout une solution à la question de glisser plusieurs éléments sélectionnés à partir d'un triable dans un connecté sortable, et ces réponses ont été les meilleurs que j'ai pu trouver.

Cependant...

L'on a accepté la réponse est buggé, et @Shanimal la réponse est proche, mais pas tout à fait terminée. J'ai pris @Shanimal du code et de la construction.

Je le fixe:

• la disparition de l'élément de liste de bug que @Ryan mentionné,
• nettoyer les erreurs de syntaxe dans le code HTML (il manque les balises de fermeture & imbriquée <li/>s).

J'ai ajouté:

• Bon Ctrl + clic (ou Cmd + clic sur un mac) de soutien pour la sélection de plusieurs éléments. En cliquant sur sans la touche Ctrl touche fera que l'élément sélectionné, et d'autres éléments dans la même liste pour être désélectionnée. C'est la même chose sur le comportement comme le jQuery UI Selectable() widget, la différence étant que, Selectable() a un rectangle de sélection sur mousedrag.

Violon

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript (avec jQuery et jQuery UI):

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});

NOTE:

Depuis que j'ai posté, j'ai mis en place quelque chose simmilar - connexion déplaçable éléments de liste triable, avec la multi-sélection de la capacité. Il est mis en place presque exactement la même, depuis jQuery UI widgets sont si semblables. Une INTERFACE utilisateur de pointe est de vous assurer d'avoir l' delay jeu de paramètres pour le draggables ou d'options, de sorte que vous pouvez cliquer pour sélectionner plusieurs éléments sans lancer une traînée. Ensuite, vous construire un assistant, qui ressemble à l'instar de tous les éléments sélectionnés (faire un élément nouveau, dupliquer les éléments sélectionnés, et de les ajouter), mais assurez-vous de quitter le poste d'origine intact (sinon c'vis de la fonctionnalité - je ne peux pas dire exactement pourquoi, mais il implique beaucoup de frustrant DOM Exceptions).

J'ai aussi ajouté des Maj + Cliquez sur la fonctionnalité, de sorte qu'il fonctionne plus comme des applications de bureau. Je devrais peut-être commencer un blog donc je peux exposer plus en détail :-)

Answer 2

Je ne travaille pas avec triable, mais avec dragable et droppable. Je ne sais pas si j'ai couvert toutes les fonctionnalités dont vous avez besoin, mais ça devrait être un bon début ( démo ici ):

HTML

 <div class="demo">
    <p>Available Boxes (click to select multiple boxes)</p>    
    <ul id="draggable">
        <li>Box #1</li>
        <li>Box #2</li>
        <li>Box #3</li>
        <li>Box #4</li>
    </ul>

    <p>My Boxes</p>
    <ul id="droppable">
    </ul>

</div>
 

Scénario

 $(document).ready(function(){

    var selectedClass = 'ui-state-highlight',
        clickDelay = 600,     // click time (milliseconds)
        lastClick, diffClick; // timestamps

    $("#draggable li")
        // Script to deferentiate a click from a mousedown for drag event
        .bind('mousedown mouseup', function(e){
            if (e.type=="mousedown") {
                lastClick = e.timeStamp; // get mousedown time
            } else {
                diffClick = e.timeStamp - lastClick;
                if ( diffClick < clickDelay ) {
                    // add selected class to group draggable objects
                    $(this).toggleClass(selectedClass);
                }
            }
        })
        .draggable({
            revertDuration: 10, // grouped items animate separately, so leave this number low
            containment: '.demo',
            start: function(e, ui) {
                ui.helper.addClass(selectedClass);
            },
            stop: function(e, ui) {
                // reset group positions
                $('.' + selectedClass).css({ top:0, left:0 });
            },
            drag: function(e, ui) {
                // set selected group position to main dragged object
                // this works because the position is relative to the starting position
                $('.' + selectedClass).css({
                    top : ui.position.top,
                    left: ui.position.left
                });
            }
        });

    $("#droppable, #draggable")
        .sortable()
        .droppable({
            drop: function(e, ui) {
                $('.' + selectedClass)
                 .appendTo($(this))
                 .add(ui.draggable) // ui.draggable is appended by the script, so add it after
                 .removeClass(selectedClass)
                 .css({ top:0, left:0 });
            }
        });

});
 

Answer 3

JSFiddle: http://jsfiddle.net/hQnWG/

 <style>
    ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top}
    li {background-color:Azure;border-bottom:1px dotted Gray}   
    li.selected {background-color:GoldenRod}
</style>
<h1>Click items to select them</h1>
<ul>
    <li>One</li>
    <li>Two<li>
    <li>Three</li>
</ul><ul>
    <li>Four</li>
    <li>Five<li>
    <li>Six</li>
</ul>
<script>
    $("li").click(function(){
        $(this).toggleClass("selected");
    })
    $("ul").sortable({
        connectWith: "ul",
        start:function(e,info){
            // info.item.siblings(".selected").appendTo(info.item);
            info.item.siblings(".selected").not(".ui-sortable-placeholder").appendTo(info.item);

        },
        stop:function(e,info){
            info.item.after(info.item.find("li"))
        }
    })
</script>
 

Answer 4

Il existe un plugin jQuery UI pour cela: https://github.com/shvetsgroup/jquery.multisortable

jsFiddle: http://jsfiddle.net/neochief/KWeMM/

 $('ul.sortable').multisortable();
 

Answer 5

Vérifie ça, ça pourrait t'aider, ça l'a fait pour moi. jquery multiple triable