trier plusieurs éléments à la fois avec jquery.l'interface utilisateur.sortable

quelqu'un à gérer pour trier plusieurs éléments à la fois avec jquery.l'interface utilisateur.sortable?
nous travaillons sur une photo de la gestion de l'app.

sélectionner plusieurs éléments
faites-les glisser vers un nouvel emplacement.

merci

si quelqu'un a gérer pour trier plusieurs éléments à la fois avec jquery.l'interface utilisateur.sortable"- comment voulez-vous de les trier..? avez-vous visuellement voulez, faites glisser tous les éléments sélectionnés? ou simplement manipuler les dom il est difficile de savoir ce que vous voulez faire...

OriginalL'auteur reco | 2011-04-08

jquery-ui-sortable

J'ai eu une demande similaire, mais la solution dans la accepté de répondre a un bug. Il dit quelque chose comme "insertBefore null", parce qu'elle supprime les nœuds.

Et aussi j'ai essayé jQuery multisortable, il empile les éléments sélectionnés sur le dessus les uns des autres lorsque vous faites glisser, ce qui n'est pas ce que je veux.

Alors j'ai lancé ma propre mise en œuvre et l'espoir qu'il sera de sauver les autres un certain temps.

Violon Lien.

Code Source:

$( "#sortable" ).sortable({
    //force the cursor position, or the offset might be wrong
    cursorAt: {
        left: 50,
        top: 45
    },
    helper: function (event, item) {
        //make sure at least one item is selected.
        if (!item.hasClass("ui-state-active")) {
            item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
        }

        var $helper = $("<li><ul></ul></li>");
        var $selected = item.parent().children(".ui-state-active");
        var $cloned = $selected.clone();
        $helper.find("ul").append($cloned);

        //hide it, don't remove!
        $selected.hide();

        //save the selected items
        item.data("multi-sortable", $cloned);

        return $helper;
    },

    stop: function (event, ui) {
        //add the cloned ones
        var $cloned = ui.item.data("multi-sortable");
        ui.item.removeData("multi-sortable");

        //append it
        ui.item.after($cloned);

        //remove the hidden ones
        ui.item.siblings(":hidden").remove();

        //remove self, it's duplicated
        ui.item.remove();
    }
});

une version de ce doit être vraiment sur le jquery.l'interface utilisateur de démonstration..
Merci! Cela m'a vraiment aidé, j'ai fait quelques petites modifications à votre violon, de sorte que vous pouvez cliquer/décochez les éléments que vous souhaitez faire glisser qui étais-je besoin d' - jsfiddle.net/4xyf59pk
L'indice de masquer et supprimer plus tard a été merveilleux, et a résolu mon problème.

OriginalL'auteur lixu

4

Il y a un plugin jQuery UI: https://github.com/shvetsgroup/jquery.multisortable

jsFiddle: http://jsfiddle.net/neochief/KWeMM/
```
$('ul.sortable').multisortable();
```
OriginalL'auteur neochief
0

... ou tout simplement de définir un 'items' option pour votre multisortable de cette façon (par exemple) :
```
$('table tbody').multisortable({
  items: 'tr'
});
```
OriginalL'auteur Baptiste LARVOL-SIMON
-1

vous pouvez utiliser shvetsgroup/jquery.multisortable

mais il permettra de créer de problème.. parce que js est conçu uniquement pour les
- balises...
  
  mais le personnaliser pour l'utiliser, il est très simple je vais vous dire comment????
  
  dans un premier temps télécharger .js et à utiliser dans votre programme...
  
  l'étape 1. ouvrir le fichier js...maintenant modifier les lignes suivantes...
```
$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'li'
};
```
  ci-dessus sont des lignes de 107 à 112....
  
  là, vous pouvez voir "les éléments: li'
  
  dans votre balise qui vous permettent d'entourer ceux de l'image comme si vous utilisez, ou tout ce que vous utilisez comme ce
```
$.fn.multiselectable.defaults = {
    click: function(event, elem) {},
    mousedown: function(event, elem) {},
    selectedClass: 'selected',
    items: 'div' //or any tag you want...
};
```
  et 249 à 254
```
selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'li'
};
```
  }(jQuery);
  
  modifier la ligne " élément:'li' " avec votre balise comme ceci
```
selectedClass: 'selected',
    placeholder: 'placeholder',
    items: 'div'  //or anything else
};
```
  }(jQuery);
  
  si vous travaillez sur des zones de texte à l'intérieur de ces enveloppes.. vous devez vous débarrasser de ces lignes trop
```
        //If no previous selection found, start selecting from first selected item.
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();
```
  après que la ligne de commentaire...
  
  ajouter une ligne de code que la zone de texte recherche ou une case à cocher ou de toute interaction de l'élément à l'intérieur d'elle...
  
  comme ça..
```
        //If no previous selection found, start selecting from first selected item.
item.children("input").focus(); //customize this code to get your element focus...
        prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
        var prevIndex = prev.index();
```
  et d'indiquer également sélectionné des balises ou des éléments... utiliser les styles de ce genre
```
        div { margin: 2px 0; cursor: pointer; }
        div.selected { background-color: orange }
        div.child { margin-left: 20px; }
```
  en fait j'ai utilisé div.. au lieu de cela, vous pouvez utiliser toutes les balises que vous souhaitez...
  
  l'espérons, aidera à u.... si elle n'est pas... lire encore.. et demander à nouveau....
  
  souhaite
OriginalL'auteur Ganesh Gaxy

Vous devez vous connecter pour publier un commentaire.