jQuery ¿Se puede ordenar para el reordenamiento de dos columnas?

Question

Hola a todos. Aquí está el escenario. Tengo el siguiente código y necesito reorganizar los elementos dentro de estas columnas. El problema es ... los elementos no necesariamente deben permanecer dentro de su columna de contenido, sino que deben poder cambiarse de un lado a otro, dependiendo del usuario. Aquí está el código de muestra:

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

Y el CSS asociado:

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

Me preguntaba si era posible usar el complemento ordenable jQuery para ordenar / ordenar elementos de envoltura en el código, o si tendría que lanzar mi propia solución. El complemento podría funcionar si quisiera ordenar los elementos dentro de la columna izquierda o derecha, pero no entre sí. Cualquier ayuda sería muy apreciada.

Answer 1

Resulta que hay una solución más fácil. Con la ayuda de Robert y los enlaces que proporcionó, esta solución funciona bien:

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

Como se indicó anteriormente, con ordenable, podría ordenar cada elemento dentro de su columna respetada, pero no se pudo "caer". sobre la columna opuesta. Con el atributo connectWith en el complemento ordenable, puede especificar otro objeto ordenable con el que desea poder ordenar. Gracias por toda la ayuda.

Answer 2

El complemento TableSorter debería hacer lo que necesita. Solo funciona con tablas, pero es muy flexible; Incluso tiene un manejo especial para los números. Actualmente lo estoy usando en un proyecto en el que estoy trabajando.

http://www.tablesorter.com/

Answer 3

La jQuery UI Sortable debería permitirle mover elementos hacia arriba y hacia abajo dentro de una columna:

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

Es un poco confuso porque el sitio jQuery también tiene una página Sortable , con una demostración que actualmente no parece funcionar.

También puede necesitar el jQuery UI Droppable:

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

El Droppable le permitirá arrastrar y soltar de una columna a la otra. Aquí está el enlace para Droppable en el sitio jQuery (esta demostración funciona):

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

Answer 4

Si va a utilizar una solución de arrastrar / soltar, threedubmedia tiene mucho más rápido, menos versión hinchada que la biblioteca jQuery UI.

Mi demo es aquí . Puede mover los nombres entre las listas pero no se ordena dentro de una lista. Sin embargo, debería ser un cambio fácil de hacer.

Answer 5

Puede obtener un ejemplo aquí: imita maravillosamente la interfaz de iGoogle junto con ordenar y soltar donde quiera: iGoogle