2013-12-17 13 views
5

問題jQueryのソート可能(様々な高さを持つアイテムは)

私は様々な高さのいくつかのアイテムと私のソート可能なリストとの問題を抱えています面倒です。問題は、より大きなアイテムを最初または最後の位置(どちらも小さなオブジェクトを持つ)に移動しようとしているときに発生します。私が現在成功している場合は、大きな項目のどこをクリックしてドラッグするかによって大きく左右されます。

アイテムをより小さなボトム位置に移動するには、アイテムの下部をクリックして機能させる必要があります。トップ位置にドラッグする場合は、上部をクリックする必要があります。しかし、私はどこかをクリックして項目をドラッグできるようにしたい。

いくつかの追加情報

項目は、親の外にドラッグすることはできませんし、親はそれがなければならない、それはそれのコンテナよりも大きいかどうスクロールが表示されるだけの大きさです。だから、私はアイテムの上部にドラッグしないと、大きなアイテムを最初の(小さい)アイテムの上にドラッグできないようです。

私はcursorAtを使ってtop:0を使ってこれを修正しようとしていましたが、bottom:0を使って別のテストをしましたが、違いはありません(どうして使い方が間違っているかもしれません)。私は現在tolerance:pointerを使用しています。

並べ替え中に大きなアイテムを最後の位置にドラッグできないという問題を回避することができます。この問題は、ドラッグされたアイテムの高さで高さを増加させます。しかし、それは必ずしもうまくいかないし、非常に良い解決策でもない。それをトップにドラッグできないという問題はまだ出ていますか?

私はjquery-sortable-with-containment-parent-and-different-item-heights

質問のようにjQueryのコードを変更することはできません。アイテム上の任意の場所をクリックして、ユーザーを可能にしながら、私は上部または下部の位置に大きな項目をドラッグするにはどうすればよい

ありがとうございました!

答えて

0

これはあなたの問題を解決できないかもしれませんが、私は今日行ったいくつかの実験の結果を分かち合うと思いました。さまざまな幅のインラインブロック画像を持つソート可能なフォトギャラリーを作成する必要があり、プレースホルダが移動していたアイテムよりも小さいので、より広い写真を移動することは本当に難しい作業であることがわかりました。私はこれを使用して終了:

container.sortable({ 
     placeholder: "photo placeholder", 
     start: function (event, ui) { 
      ui.placeholder.width(ui.item.width()); 
     } 
    }); 

カスタムプレースホルダクラスはプレースホルダは、デフォルトでは非表示になっていないことを確認することがある、とstartイベントはプレースホルダーは、あなたがしようとしている項目と同じ幅であることを保証します動くこれは私のために非常にうまくいっています。あなたの場合、高さを幅に置き換えるとうまくいくかもしれません。

また、私が行ったようにcontainmentを使ってみましたが、行の項目によっては時には非常に困難になることがあります。あなたが説明したように、tolerance: "pointer"を含めて問題を緩和するのに役立ちますが、可能であれば、containmentを削除すると、一般的にUIがより寛容になります。

関連する問題