Geek asks and answers

CSS for two columns of jQuery UI Sortable List grid that handles elements of different sizes

I am trying to get a sort list with two drag and drop columns. I set up jQuery UI SortableList with single <ul>and <li>that float:leftwidth and half<ul>

Here is the code and example: http://jsfiddle.net/elidickinson/hjnkg/

Basically I want to bridge the gap between item3 and item5 in this jsfiddle link. I want to be able to drag any of these elements and not leave any internal spaces.

I don’t see an obvious way to solve this problem in CSS, so my best idea is to write JS that looks for any “tall” elements that appear in the right column and switches them to float:right. This should solve the problem, but I hope for a more elegant solution.

I am also open to any alternative approach, for example, using two separate columns without floats. This solves the problem for “tall elements,” but I think it will take some CSS magic to work with the “wide” elements that span two columns.

+3
source share
3 answers

. , , http://isotope.metafizzy.co/index.html, . , , - , , . : http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/

Buuttttt, , , - :

$('#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()
            });             
        }
    });
+1

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; }
0

( ) , change sortable. , "" LI , , , , LI float: left. .

, clear: both LI ( ), , LI. (, ), .

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 } );

The notselector part is used to ignore the dragged LI element (identified by its class .ui-sortable-helper) when determining which LI elements are in the first column. (You can also shorten this with the help of even and odd jquery selectors - this is not done here because the fragment was adapted from a more general case to support more than two columns in the list.)

Please note that you also need to call setClearsOnFirstColumnafter the initial display of the list.)

0
source

More articles:


All Articles