jQueryソート可能のための二つの列の並べ替え?

StackOverflow https://stackoverflow.com/questions/1034953

質問

こんにちは。こちらではのシナリオ。いて以下のコードがないと思うが必要に変更の確認や自動更新の解除-設定をこれらの列をこの問題は---項目な状態を維持する必要性を含むカラムへの切り替えができ行によっては、ユーザーです。こちらはサンプルコード:

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

に関連する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; }

破壊も修復もおもしろくなることが可能でしたのjQueryプラグインソート可能にソートするラッパー素子のコードの場合、またはいロールを自分の溶液とする。プラグインの仕事ができる場にしたいソートの要素 以内 左または右側のカラムがないます。自うぞよろしくお願い申し上げます。

役に立ちましたか？

解決 2

があります。のロバートとのリンクを提供していただき、このソリューションでは、微細:

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

また、上述した以外にも、ソート可能、ソート項目 以内 その尊重されるカラムですが、できない"落とし"の反対側のカラムです。のconnectWith属性のソート可能プラグインを指定することができます他のソート可能オブジェクトにおいても並び替えることができます。感謝のです。

他のヒント

のTableSorterプラグインをなすべきで作られています。でのみ動作テーブルではフレキシブル性に富み;でも特別な取り扱います。私は現在使用してプロジェクトしました。

http://www.tablesorter.com/

の jQuery UIソート可能 べき項目に移動上下内の列:

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

ちょっと混乱では、jQueryのサイトも ソート可能 ページは、デモにより、現在はが表示されていない。

きもの jQuery UI Droppable:

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

のDroppable可能にするドラッグから一つの列ができる。こちらのリンクDroppableのjQueryのサイト（このデモはない):

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

っている場合、ドラッグ／ドロップ液 threedubmedia によってより速く、肥大化版以上のjQuery UIの図書館があります。

デモは こちらの.この場合、名前のリストなソート内にリストアップしました。すべきく変えるものです。

ときの例です:でbeautifulyを模したiGoogle ータとソートと落としどこにしたい:iGoogle

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top