3

我正在尝试创建一个拖放式两列可排序列表。我已经设置了 jQuery UI 的 SortableList ，其中有一个<ul>and<li>是float:left宽度的一半<ul>

这是代码和示例：http: //jsfiddle.net/elidickinson/hjnkg/

基本上我想消除那个jsfiddle链接中item3和item5之间的差距。我希望能够拖动任何这些元素而不留下任何内部间隙。

我在 CSS 中没有看到任何明显的方法来解决这个问题，所以我最好的想法是编写一些 JS 来查找出现在右侧列中的任何“高”项目并将它们切换到float:right. 那应该可以解决问题，但我希望有一个更优雅的解决方案。

我也对任何替代方法持开放态度，例如使用两个没有浮动的单独列。这解决了“高项目”的问题，但我认为处理占用两列的“宽”项目需要一些 CSS 魔法。

4

3 回答 3

1

现有的插件都不允许可拖动排序。我能找到的最接近的东西是http://isotope.metafizzy.co/index.html，它确实有一个按按钮排序的选项。这是一个非常复杂的问题，我认为还没有人承担过，至少没有公开。这是 Isotope 的创建者的帖子：http: //metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/

Bututtttt，如果您想让占位符大小相同，请执行以下操作：

$('#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我们的问题是我们在两列列表中有一些“高”的 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 } );

选择器的一部分用于在确定第一列中的 LI 元素是哪些时not忽略被拖动的 LI 元素（由其类标识）。.ui-sortable-helper（也可以通过使用偶数和奇数的 jquery 选择器来缩短它——这里不是这样做的，只是因为片段是从更一般的情况改编的，以支持列表中的两列以上。）

请注意，您还需要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 回答