javascript - 无法让 jQueryUI 的可排序 dropOnEmpty 工作

Question

我有一个应用程序，其中参赛者被编队参加一项事件。用于在小队之间移动竞争对手的 UI 使用 jQuery-UI 的 Accordion 和可排序小部件。 Accordion 最初是折叠的，每个标题显示球队编号和球队中的参赛者人数。为了转移一名参赛者，该参赛者所在的球队以及目的地球队都会扩大。然后，将竞争对手从一个列表拖到另一个列表，并更新每一侧标题中的计数。当竞争对手被放入其中时，该列表会自动重新排列。还可以将竞争对手从一侧拖到另一侧。

所有这些都很有效，直到所有参赛者都被拖出小队，使其空了。此后，我无法再将竞争对手放入空队中，而且我一直无法弄清楚为什么。

我创建了一个 JSFiddle 来演示正在运行的 UI，地址为 http://jsfiddle.net/jcwren/5V5HU/ 。打开左边的小队 2，右边的小队 1，然后将 Scooby、Shaggy 和 Thelma 拖到小队 1。现在尝试将其中一个拖回小队 1。

作为额外的好处，我希望能够通过将竞争对手拖放到标题上来将其拖入未扩展的列表中。我承认我没有花太多时间尝试让它发挥作用，因为空列表问题一直让我感到沮丧。

让 StackOverflow 满意的代码(尽管如果没有随附的 HTML，它就毫无用处......)

$('.ulLeft, .ulRight').accordion({
    collapsible: true,
    heightStyle: 'content',
    active: 'none'
});

//
//  Gets called once by the source ('remove') side, and once by the destination
//  ('receive') side. First we resort the ordered list items (which isn't really
//  necessary for the remove side, but we'll fix that later), then we replace the
//  HTML content of this side with the sorted contents (this side is expanded, we
//  see all the elements in it), and then we update the list on the opposite (which
//  will only be visible if we're moving to the same squad). We need to do this so
//  if that squad is expanded later, it will have the same list content.
//
function updateList(thisOL, oppositeOL) {
    var squadNumber = thisOL.attr('squadnumber');
    var olNew = _.sortBy(thisOL.find('li'), function (li) {
        return $(li).text();
    });

    thisOL.html(olNew);
    $('.' + oppositeOL + '_' + squadNumber).html($(olNew).clone());

    _.each(['ulLeft', 'ulRight'], function (side) {
        var ht = $('#h4_' + side + '_squad_' + squadNumber);
        var sn = ht.html().replace(/\(\d+\)/, '(' + olNew.length + ')');
        ht.html(sn);
    });
}

//
//  Create sortables, connect left list to right, right list to left
//
$('.olLeft').sortable({
    connectWith: '.olRight',
    cursor: 'move',
    receive: function (event, ui) {
        updateList($(this), 'olRight');
    },
    remove: function (event, ui) {
        updateList($(this), 'olRight');
    }
});

$('.olRight').sortable({
    connectWith: '.olLeft',
    cursor: 'move',
    receive: function (event, ui) {
        updateList($(this), 'olLeft');
    },
    remove: function (event, ui) {
        updateList($(this), 'olLeft');
    }
});

$('.ulLeft, .ulRight, .olLeft, .olRight').disableSelection();

Answer 1

对于第一部分，问题在于列表的高度为 0。在 updateList 函数中添加类似以下内容可以解决该问题。

if (thisOL.children().length == 0) {
    thisOL.height(10);
}

fiddle :http://jsfiddle.net/5V5HU/14/