jQuery Sortable pour réorganisation de deux colonnes?

Question

Salut à tous. Voici le scénario. J'ai le code ci-dessous et j'ai besoin de réorganiser les éléments dans ces colonnes. Le problème est que… les éléments ne doivent pas nécessairement rester dans la colonne qui les contient, ils doivent pouvoir être permutés dans les deux sens, en fonction de l'utilisateur. Voici l'exemple de code:

<div id="container">
    <div id="left-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">
            <div class="item">
                <h2>Row 2 Column 1</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end left-col -->
    <div id="right-col">
        <div class="wrapper">
            <div class="item">
                <h2>Row 1 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
        <div class="wrapper">   
            <div class="item">
                <h2>Row 2 Column 2</h2>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div><!-- end right-col -->
</div>

Et le CSS associé:

#container {
            border: 1px solid black;
            overflow: hidden;
            margin: auto;
        }
        #container .wrapper {
            width: 100%;
        }
        #container #left-col .item {
            margin: .5em .25em .5em .5em;
            border: 1px solid black;
        }
        #container #right-col .item {
            margin: .5em .5em .5em .25em;
            border: 1px solid black;
        }
        #left-col, #right-col { width: 50%; }
        #left-col { float: left; }
        #right-col { float: right; }
        .item h2 { background: #ccc; }

Je me demandais s'il était possible d'utiliser le plug-in jQuery sortable pour trier / ordonner les éléments d'encapsulation dans le code, ou si je devais lancer ma propre solution. Le plug-in pourrait fonctionner si je voulais trier les éléments dans la colonne de gauche ou de droite, mais pas entre eux. Toute aide serait grandement appréciée.

Answer 1

Il s’avère qu’il existe une solution plus simple. Avec l’aide de Robert et les liens qu’il a fournis, cette solution fonctionne parfaitement:

$(function() {
    $("#left-col").sortable({
        handle: '.item h2',
        connectWith: '#right-col'
    }).disableSelection();
    $("#right-col").sortable({
        handle: '.item h2',
        connectWith: '#left-col'
    }).disableSelection();
});

Comme indiqué précédemment, avec triable, je pouvais trier chaque élément dans sa colonne respectée, mais il ne pouvait pas être "supprimé". sur la colonne opposée. Avec l’attribut connectWith sur le plug-in triable, vous pouvez spécifier un autre objet triable avec lequel vous voulez pouvoir trier. Merci pour toute l'aide.

Answer 2

Le plug-in TableSorter devrait faire ce dont vous avez besoin. Cela ne fonctionne qu'avec des tables, mais il est très flexible. il a même un traitement spécial pour les nombres. Je l'utilise actuellement dans un projet sur lequel je travaille.

http://www.tablesorter.com/

Answer 3

Le jQuery UI Sortable doit vous permettre de déplacer des éléments de haut en bas dans une colonne:

http://jqueryui.com/demos/sortable/

C'est un peu déroutant, car le site jQuery comporte également une page Sortable , avec une démonstration. cela ne semble pas fonctionner actuellement.

Vous aurez peut-être également besoin de jQuery UI Droppable:

.

http://jqueryui.com/demos/droppable/

La liste de contrôle vous permet de glisser-déposer d’une colonne à l’autre. Voici le lien pour Droppable sur le site jQuery (cette démonstration fonctionne):

http://docs.jquery.com/UI/API/1.7/Droppable

Answer 4

Si vous envisagez une solution de glisser-déposer, threedubmedia est beaucoup plus rapide, moins version plus lourde que la bibliothèque de l'interface utilisateur jQuery.

Ma démo est ici . Vous pouvez déplacer les noms entre les listes mais cela ne se trie pas dans une liste. Cela devrait être un changement facile à faire cependant.

Answer 5

Vous pouvez en obtenir un exemple ici: il imite magnifiquement l'interface iGoogle avec un tri et une suppression où vous le souhaitez: iGoogle