jquery - 用于处理不同大小元素的两列 jQuery UI 可排序列表网格的 CSS

Question

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

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

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

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

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

Answer 1

现有的插件都不允许拖动排序。我能找到的最接近的是 http://isotope.metafizzy.co/index.html ，它确实有一个可按按钮排序的选项。这是一个非常复杂的问题，我认为还没有人做过，至少没有公开做过。这是同位素创建者的帖子: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()
            });             
        }
    });