按类列出的jquery可排序限制数量

时间:2014-04-23 14:42:50

标签: javascript jquery jquery-ui jquery-ui-sortable

您好我想限制<ul id="sortable1">中该类等于该列表中3个项目的项目数量。

如果没有特定于某个类,我就实现了这一点:

 $(function() {
    $("#sortable1").sortable({
    connectWith: '.connectedSortable',
    //receive: This event is triggered when a
    //connected sortable list has received an item from another list.
    receive: function(event, ui) {
        // so if > 7
        if ($(this).children().length > 7) {
            //ui.sender: will cancel the change.
            //Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
            alert('Your selection has been cancelled. Maximum  7 banners are allowed in the carousel.');

        }
    }
    }).disableSelection();
});

然而,当我更具体地说这不起作用时

$('#sortable1').sortable({
    connectWith: ".connectedSortable",

    revert:true,
    receive: function(event, ui)
    {
        var list = $(this);
            if (list.attr('class') = "defaultbanner") {
                    if (list.children().length > 3) {
                            // move item back to main_list
                                        alert('Only three default banners can be selected!');

                            $(ui.sender).sortable('cancel');
                    }
            }
        }
}).disableSelection();

我不确定自己做错了什么,有人能指出我正确的方向吗?

我想要做的是在ul sortable1中不允许超过3个默认横幅。我已经为所有名为defaultbanners的横幅添加了一个类来处理这个问题。我上面实施的方式并不起作用。

有人能告诉我这应该如何有效实施吗?

我的代码可以在jsFiddle

上看到

提前致谢。

1 个答案:

答案 0 :(得分:0)

可以这样做:

receive: function(event, ui)
{
    var list = $(this);
    if (list.children('.defaultbanner').length > 3) {
        // move item back to main_list
        alert('Only three default banners can be selected!');
        $(ui.sender).sortable('cancel');
    }
}

示例:

Fiddle