jQuery Sortable para reordenação Coluna Dois?

Question

Olá a todos. Aqui está o cenário. Eu tenho o código abaixo, e eu estou precisando para reorganizar os itens dentro dessas colunas. O problema é ... os itens não precisa necessariamente de permanecer dentro de sua coluna que contém, eles precisam ser capazes de ser mudado e para trás, dependendo do usuário. Aqui está o código de exemplo:

<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 o CSS associado:

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

Eu queria saber se era possível usar o plugin classificável jQuery para tipo / ordem invólucro elementos no código, ou se eu teria que fazer a minha própria solução. O plug-in poderia funcionar se eu estava querendo classificar os elementos dentro a esquerda ou para a coluna da direita, mas não entre si. Qualquer ajuda seria muito apreciada.

Answer 1

Acontece que há uma solução mais fácil. Com a ajuda de Robert e as ligações que ele forneceu, esta solução funciona bem:

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

Como afirmado anteriormente, com classificáveis, eu poderia classificar cada item dentro sua coluna respeitado, mas que não podia ser "caiu" sobre a coluna o oposto. Com o atributo connectWith sobre o plugin classificável, você pode especificar um outro objeto classificáveis ??que você quer ser capaz de classificar com. Obrigado por toda a ajuda.

Answer 2

O plugin TableSorter deve fazer o que você precisa. Ele só funciona com tabelas, mas é muito flexível; ele ainda tem um tratamento especial para os números. Atualmente, estou usando-o em um projeto que eu estou trabalhando.

http://www.tablesorter.com/

Answer 3

O jQuery UI Sortable deve permitir que você mover itens para cima e para baixo dentro de uma coluna:

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

É um pouco confuso, porque o site jQuery também tem um href="http://docs.jquery.com/UI/Sortable" rel="nofollow noreferrer"> página , com uma demo que atualmente não parece trabalho.

Você também pode precisar o jQuery UI droppable:

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

O droppable permitirá que você arrastar e soltar de uma coluna para o outro. Aqui está o link para droppable no site jQuery (esta demo funciona):

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

Answer 4

Se você estiver indo para ir com uma solução arrastar / soltar, threedubmedia tem um muito mais rápido, menos versão inchado do que a biblioteca jQuery UI.

Meu demo é aqui . Você pode mover os nomes entre as listas, mas não faz tipo dentro de uma lista. Isso deve ser uma mudança fácil de fazer embora.

Answer 5

Você pode obter um exemplo aqui: é beautifuly imita a interface do iGoogle juntamente com a classificação e largando onde quiser: iGoogle