3

私はこのライブラリを使用しています：HTML5の並べ替え可能なドラッグアンドドロップ。

2列幅のブロックに使用しています。そのマークアップ：

<ul class="sortable grid">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li style="height: 200px;">Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li style="height: 200px;">Item 7</li>
    <li>Item 8</li>
</ul>

私は問題を抱えています。特定のブロックの高さが異なる場合floatは、レイアウトを乱さないように、2番目のブロックの後をなんとかクリアする必要があります。

悪い

誰かが何かアイデアを持っているなら、ここhttp://jsfiddle.net/jasondavis/4njSE/6/にライブ作業デモがあります。.sortable>:nth-child(odd) {clear:left}奇数リストアイテムのセレクターを試してみましたliが、これは見た目はうまくいきますが、ドラッグアンドドロップの機能が台無しになります。アイテムをドロップすると、正しい位置に移動しません。

このJSFiddleは、.sortable>:nth-child(odd) {clear:left}追加された http://jsfiddle.net/jasondavis/4njSE/7/で動作することを示しています。

そしてアイデア？私は今途方に暮れています。

dragableまた、2つのブロックのすべてのセットを独自のコンテナー内にラップしようとしましたが、ライブラリがコンテナーdivにを追加するため、ドラッグアンドドロップが正しく機能しません。

これは、目標のイメージであり、どのように見えるかを示しています。

良い

4

2 に答える 2

2

どうぞ：

最初に-動作するjsfiddleの例。

基本的に、プラグインに2つのイベントコールバックを追加しました：onStartDragとonEndDrag。これらは順番に関数を呼び出します。これは、要素ではない奇数のaddFloats要素にfloatを追加することを処理する単純な関数です（これは純粋なCSSでは実現できません）。ソート可能なプラグインを呼び出すときにもその関数を呼び出す必要がありましたが、それだけです。sortable-dragging

楽しみ ：）

于 2013-03-18T18:54:56.927 に答える
1

このCSSを追加します。

.sortable>:nth-child(odd) {clear:left}
于 2013-03-17T21:41:31.697 に答える