jQueryのソート可能なグリッド機能同一の寸法

Question

のない私は、jQueryのソート可能なグリッドが何に似てソート可能な（ドラッグ＆ドロップ経由）グリッド、（http://jqueryui.com/demos/sortable/#display-grid）を作成するために探しています。ただし、Sortableでは、同じ次元のdivのみを使用する必要があります。私の目的のために、各ブロックは異なる幅と高さにすることができます。

私が探している機能は、他の要素を邪魔にならずにグリッドにスナップできる機能です。 Draggableは、他の要素が重なり合うのを防ぐことを除いてすべてを行います。

ああ、Jqueryである必要はありません。私は他の方法を使う方が簡単なのではないかと思っています。

Answer 1

短い答え：彼らの新しい位置に従ってすべてのグリッドの要素を再計算する

使用「停止」イベント。

一般的なコメント：変数要素の寸法の

ソート可能なグリッド - 異なるサイズの要素が複数回移動すると、それはあなたがそれらのいずれかをドラッグしている間、上下にジャンプして、視覚的な混乱です。各移動の後に完全に異なるレイアウトとなる。私はjQueryプラグイン「スワップ」 http://www.eslinstructor.net/demo/swappable/swappable_home.html

を開発し、最近、私はこのプラグインに関する同じ質問に答え似た機能で作業

：

to Swap elemnts(with className too) when Draged & Dropped

は議論を見てくださいと多分それはあなたを助けます。

よろしく、

-Vadim

Answer 2

あなたがここに私のプロトタイプで見ることができるように、同じ寸法であることを項目を必要としない

jQueryのソート可能：http://brettlyman.net/dashboard/index3.html

ほとんどの人が< ULを使用>ソート可能なコンテナとして<li>をソート可能なアイテムとして使用し、必要なコンテンツをすべて含めることができます。 "list-style-type：none; margin：0; padding：0;"を入れてください。 <ul>のスタイルで表示され、コンテナのように見える/動作します。

残念ながら、ソート可能な場合、フリーフォームのグリッドを作成することはできません。アイテムは互いに近接している必要があります。私のプロトタイプでは、すべてを左に浮かべて、右に塗りつぶして次の行に落とします。グリッドタイプのレイアウトを強制することができるので、コンテナのサイズ変更にグリッドオプションを設定しました。

私は他の誰かが同じタイプの問題を抱えている場合に備えて私のソリューションを投稿します。

Answer 3

私は自分自身で問題を解決しようとするこの質問に出会った。

回避策を試すときに私の最初の繰り返しです：親コンテナを廃棄可能なとして使用してください。それが動作するかどうかを知るようになる：

次のHTMLの場合：

<div id="sortable"> 
    <div><div class="handle"></div>1</div> 
    <div><div class="handle"></div>2</div> 
    <div><div class="handle"></div>3</div> 
    ... 
</div> 

次のJavaScriptの使用：

$('#sortable') 
    .sortable({ 
    handle: '.handle', 
    tolerance: 'pointer' 
    }) 
    .droppable({ 
    drop: function(e, ui) { 
     var previousElement = ui.draggable.parent().children().filter(function() { 
     var $this = $(this); 
     var pos = $this.position(); 
     return (this != ui.draggable[0]) && (pos.left <= ui.position.left) && (pos.top <= ui.position.top); 
     }).last(); 
     if(previousElement.length) { 
     previousElement.after(ui.draggable[0]); 
     ui.draggable.parent().data().sortable._noFinalSort = true; 
     } 
    } 
    });