Question

我有一个应用程序，竞争对手被派去参加一个活动。用于在小队之间移动竞争对手的UI使用jQuery-UI的手风琴和可排序的小部件。手风琴最初被折叠，每个标题显示小队号码和小队中的竞争者数量。为了移动竞争对手，竞争对手所在的小队扩大了，目标小队也是如此。然后将竞争者从一个列表拖到另一个列表中，并更新每一侧的标题中的计数。当竞争对手被投入使用时，该列表会自动使用。竞争对手也可以从任何一方拖到另一方。

所有这一切都很有效，直到所有的竞争对手都被拖出一个小队，把它留空。在那之后，我再也不能让竞争对手陷入空旷的阵容中，而我却无法找出原因。

我已经在http://jsfiddle.net/jcwren/5V5HU/创建了一个演示实际用户界面的JSFiddle。左侧开放小队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/

无法使jQueryUI的可排序dropOnEmpty工作

1 个答案: