jQuery 2列の並べ替えのためのソート可能？

こんにちは。ここにシナリオがあります。私は以下のコードを持っており、これらの列内の項目を再配置する必要があります。問題は、アイテムが必ずしもその列に残る必要はなく、ユーザーに応じて前後に切り替えることができる必要があるということです。ここではサンプルコードは次のとおりです。jQuery 2列の並べ替えのためのソート可能？

<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のソート可能なプラグインを使用することが可能であった場合は疑問に思った場合、またはました私は自分のソリューションをロールバックする必要があります。私が要素をの中の左または右の列に並べ替えることを望んでいたとしても、プラグインは機能する可能性があります。どんな助けでも大歓迎です。

出典

2009-06-23 blparker

あなたは（追加/削除）左から右を作成しようとしているセレクタを？ –

並べ替え要素はそれぞれの列で上下に移動でき、必要に応じて左から右に移動できます。 – blparker

簡単な解決法があります。ロバートと彼は提供されたリンクの助けを借りて、このソリューションは正常に動作します：

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

以前、ソート可能で述べたように、私は以内に尊敬列を各アイテムを並べ替えることができますが、それは「ドロップすることができませんでした反対の列の上にある。ソート可能なプラグインのconnectWith属性を使用すると、ソート可能にしたい別のソート可能なオブジェクトを指定できます。すべての助けに感謝します。

出典

2009-06-23 21:28:48 blparker

TableSorterプラグインは、必要な操作を行う必要があります。テーブルでのみ動作しますが、非常に柔軟です。それは数字のための特別な処理をしています。私は現在、私が取り組んでいるプロジェクトでそれを使用しています。

http://www.tablesorter.com/

出典

2009-06-23 20:29:06

私は許しますが、表形式のデータを並べ替えるためのプラグインを使って、HTML要素の並べ替え/並べ替えを行う方法を正確には分かりません。 – blparker

これらの要素がおよびでない限り、そうはなりません。どのような問題を解決しようとしていますか？ –

私が取り組んでいる問題は、これらの個々のアイテムは、ページロード後に必要に応じてユーザーが並べ替える必要がある情報の「ウィジェット」となることです。私が2列のアプローチで行かなければならなかった理由は、各アイテムの高さが異なる可能性があるため、どちらかのアイテムが長い場合は、その下のアイテムが上に移動してスペースを取る必要があります。 – blparker

のjQuery UIソート可能は、あなたが列内の項目を上下に移動できるようにする必要があります。

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

jQueryのサイトでもSortableページを持っているので、それは少し紛らわしいです現在は動作していないデモが表示されます。

またjQueryのUIドロップ可が必要になることがあります

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

ドロップ可をドラッグすると、他の1つの列からドロップすることができます。あなたはドラッグ/ドロップ溶液で行くつもりされている場合は、

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

出典

2009-06-23 20:44:09

threedubmediaは、より少ない肥大化したバージョンをはるかに高速を持っている：ここではjQueryのサイト上でドロップ可のリンクが（このデモは、作業を行う）でありますjQuery UIライブラリ。

私のデモはhereです。リスト間で名前を移動できますが、リスト内ではソートされません。それは簡単に変更する必要があります。

出典