3

ドラッグ アンド ドロップで 2 列の並べ替え可能なリストを作成しようとしています。jQuery UI の SortableList を 1 つの and でセットアップしまし<ul>た。<li>float:left<ul>

コードと例は次のとおりです。http://jsfiddle.net/elidickinson/hjnkg/

基本的には、その jsfiddle リンクの item3 と item5 の間のギャップを解消したいと考えています。これらの要素をドラッグして、内部のギャップを残さないようにしたいと考えています。

CSS でこれを解決する明確な方法が見当たりません。そのため、右側の列に表示される「背の高い」アイテムを探して に切り替える JS を作成することをお勧めしますfloat:right。これで問題は解決するはずですが、より洗練された解決策を期待しています。

また、フロートなしで 2 つの別々の列を使用するなど、代替アプローチにもオープンです。これで「背の高いアイテム」の問題は解決しますが、2 列を占める「幅の広い」アイテムを処理するには CSS マジックが必要になると思います。

4

3 に答える 3

1

そこにある既存のプラグインはどれも、ドラッグ可能な並べ替えを許可していません. 私が見つけることができる最も近いものはhttp://isotope.metafizzy.co/index.htmlで、ボタンでソート可能なオプションがあります。これは非常に複雑な問題であり、少なくとも公にはまだ誰も取り組んでいないと思います。Isotope の作成者からの投稿は次のとおりです: http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/

ただし、プレースホルダーを同じサイズにしたい場合は、次のようにします。

$('#list').sortable({ 
        placeholder: "ui-state-highlight",
        tolerance:'pointer',
        start: function (event, block) { 
            // set the placeholder size to the block size
            $('.ui-state-highlight').css({
                'width':$(block.helper).outerWidth(),
                'height':$(block.helper).outerHeight()
            });             
        }
    });
于 2012-05-04T20:04:24.190 に答える
0

change関数のオプションを使用して、同様の (ただし同一ではない) 問題を解決することに成功しましたsortable。私たちの問題は、2 列のリストにいくつかの「背の高い」LI 要素があり、それらの背の高い要素が最初の列にある場合、すべての LI 要素がfloat: left. これにより、ソート時に非常に奇妙な相互作用が発生します。

clear: bothこの問題を回避するには、最初の列のすべての LI 要素 (すべての奇数要素) に適用できますが、リストに絶対配置 ( 1 つがドラッグされている場合)、偶数セレクターと奇数セレクターが破棄されます。

change解決策は、並べ替え中に DOM が変更されるたびに呼び出されるコールバックを使用することでした。その後、jquery を使用して、実際に最初の列にある LI 要素を正確に把握し、clear: bothそれらの要素に適用することができます。

     function setClearsOnFirstColumn() {
        var colNum = 0;
        $(".myList").find( "li:not(.ui-sortable-helper)" ).each( function() {
            var thisLiEl = $(this);

            if( colNum == 0 )
                thisLiEl.css( "clear", "both" );
            else
                thisLiEl.css( "clear", "none" );

            colNum ++;
            if( colNum == 2 ) colNum = 0;
        } );
    }

    $(".myList").sortable( { change: setClearsOnFirstColumn, stop: setClearsOnFirstColumn } );

セレクターのnot一部は、最初の列の LI 要素がどれであるかを判断するときに、ドラッグされている LI 要素 (その.ui-sortable-helperクラスによって識別される) を無視するように機能します。(偶数および奇数の jquery セレクターを使用してこれを短縮することもできます。リスト内の 2 つ以上の列をサポートするためにスニペットがより一般的なケースから適応されたという理由だけで、ここではそのようには行われません。)

setClearsOnFirstColumnリストが最初にレンダリングされた後にも呼び出す必要があることに注意してください。)

于 2012-12-23T06:21:16.760 に答える
0

これは、私の質問で提案した JavaScript ソリューションの非常にハッキングされたバージョンです。機能しているように見えますが、確かにきれいではありません。ここでは jsFiddle にあります: http://jsfiddle.net/elidickinson/tRjDM/

function update_columns() {
    var column = 1;
    var orient_1past = '';
    var orient_2past = '';
    $("#dashboard-layout .item").each(function() {
        var $item = $(this);
        var orient_current = 'normal';
        if ($item.hasClass('wide')) {
            orient_current = 'wide';
        }
        if ($item.hasClass('tall')) {
            orient_current = 'tall';
        }

        if ((orient_2past == 'tall') || (orient_1past == 'wide') || orient_1past == '') {
            // do nothing
        }
        else {
            // move to next column
            column = (column == 1) ? 2 : 1;
        }

        // remove any existing columns classes
        $item.removeClass('column1').removeClass('column2');

        // add class for calculated column
        $item.addClass('column' + column)

        // keep track of previous two item orientations                
        orient_2past = orient_1past;
        orient_1past = orient_current;
    });
}

さらに、次のような CSS ルールがいくつかあります。

.item.column1 { float: left; }
.item.column2 { float: right; }
于 2012-05-09T16:02:19.523 に答える