jQuery Sortable für zwei Neuanordnung von Spalten?

Question

Hey alle. Hier ist das Szenario. Ich habe den Code unten, und ich bin, um die Einzelteile innerhalb dieser Spalten neu zu ordnen. Das Problem ist ... die Elemente müssen nicht innerhalb ihrer enthalten Spalt bleiben müssen, müssen sie in der Lage sein, hin und her zu schalten, je nach Benutzer. Hier ist der Beispielcode:

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

Und die dazugehörige CSS:

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

ich mich gefragt, ob es möglich ist, das jQuery sortierbar Plugin verwendet Wrapper Elemente im Code zu sortieren / Reihenfolge, oder wenn ich müsste meine eigene Lösung rollen. Das Plugin könnte funktionieren, wenn ich die Elemente sortieren fehlte innerhalb der linken oder der rechten Spalte, aber nicht untereinander. Jede Hilfe wäre sehr geschätzt.

Answer 1

Es stellt sich heraus gibt es eine einfachere Lösung. Mit Hilfe von Robert und den Verbindungen er vorgesehen ist, funktioniert diese Lösung in Ordnung:

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

Wie bereits erwähnt, mit sortierbar, ich jedes Element sortieren könnte innerhalb seine respektierten Spalt, aber es konnte nicht „fallen gelassen“ über das die gegenüberliegende Spalte. Mit dem connectWith Attribute auf dem sortierbar Plugin können Sie einen anderen sortierbare Gegenstand angeben, die Sie in die Lage sein wollen, mit zu sortieren. Vielen Dank für all die Hilfe.

Answer 2

Das Tablesorter Plugin sollte das tun, was Sie brauchen. Es funktioniert nur mit Tischen, aber es ist sehr flexibel; es hat sogar eine spezielle Behandlung für Zahlen. Ich bin derzeit in einem Projekt mit dem ich arbeite.

http://www.tablesorter.com/

Answer 3

Die jQuery UI Sortable sollten Sie erlauben Elemente zu bewegen, nach oben und unten in einer Spalte:

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

Es ist ein wenig verwirrend, weil die jQuery-Website hat auch eine Sortable Seite, mit einem Demo dass zur Zeit scheint nicht zu funktionieren.

Sie können auch müssen die jQuery UI Dropfähig:

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

Die Dropfähig ermöglicht es Ihnen, von einer Spalte zur anderen zu ziehen. Hier ist der Link für Dropfähig auf der jQuery-Website (diese Demo funktioniert):

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

Answer 4

Wenn Sie vorhaben, mit einer Drag / Drop-Lösung zu gehen, threedubmedia hat eine viel schnellere, weniger aufgeblähte Version als die jQuery UI-Bibliothek.

Meine Demo ist hier . Sie können die Namen zwischen den Listen bewegen, aber es innerhalb einer Liste nicht sortiert werden. Das sollte eine einfache Änderung sein, obwohl zu machen.

Answer 5

Sie können ein Beispiel bekommen hier: Es beautifuly ahmen die iGoogle-Schnittstelle zusammen mit Sortieren und Ablegen, wo immer Sie wollen: iGoogle