jQuery ordinabile per il riordino a due colonne?

Question

Ciao a tutti. Ecco lo scenario. Ho il codice qui sotto e ho bisogno di riordinare gli elementi all'interno di queste colonne. Il problema è ... gli elementi non devono necessariamente rimanere all'interno della loro colonna di contenimento, devono essere in grado di passare avanti e indietro, a seconda dell'utente. Ecco il codice di esempio:

<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>

E il CSS associato:

#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; }

Mi chiedevo se fosse possibile utilizzare il plug-in ordinabile jQuery per ordinare / ordinare gli elementi wrapper nel codice o se avrei dovuto implementare la mia soluzione. Il plug-in potrebbe funzionare se volessi ordinare gli elementi all'interno della colonna sinistra o destra, ma non tra di loro. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Si scopre che esiste una soluzione più semplice. Con l'aiuto di Robert e dei collegamenti forniti, questa soluzione funziona bene:

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

Come affermato in precedenza, con ordinabile, ho potuto ordinare ogni elemento all'interno della sua colonna rispettata, ma non poteva essere " lasciato cadere " sopra la colonna opposta. Con l'attributo connectWith sul plug-in ordinabile, è possibile specificare un altro oggetto ordinabile con cui si desidera ordinare. Grazie per tutto l'aiuto.

Answer 2

Il plugin TableSorter dovrebbe fare ciò di cui hai bisogno. Funziona solo con i tavoli, ma è molto flessibile; ha anche una gestione speciale per i numeri. Attualmente lo sto usando in un progetto a cui sto lavorando.

http://www.tablesorter.com/

Answer 3

La interfaccia utente jQuery ordinabile dovrebbe consentire di spostare gli elementi su e giù all'interno di una colonna:

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

È un po 'confuso perché il sito jQuery ha anche una ordinabile , con una demo che al momento non sembra funzionare.

Potrebbe essere necessario anche Droppable dell'interfaccia utente jQuery:

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

Il droppable ti permetterà di trascinare e rilasciare da una colonna all'altra. Ecco il link per Droppable sul sito jQuery (questa demo funziona):

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

Answer 4

Se hai intenzione di andare con una soluzione di trascinamento della selezione, threedubmedia ha una velocità molto inferiore, inferiore versione gonfiata rispetto alla libreria dell'interfaccia utente jQuery.

La mia demo è qui . È possibile spostare i nomi tra gli elenchi ma non si ordina all'interno di un elenco. Questo dovrebbe essere un semplice cambiamento da apportare.

Answer 5

Puoi fare un esempio qui: imita magnificamente l'interfaccia di iGoogle insieme all'ordinamento e al rilascio dove vuoi: iGoogle