Question

我有六个连接拖放的列表。我有一个包含35个条目的主列表，其中包含所有列表项。然后我有五个子列表，其中七个条目都是空白。所以，我想要将35个项目分类到五个子区域。我已经设置了它，以便子列表达到限制，七，并且不允许再输入，除非一个条目被拖出到另一个可用列表。我很好用快速下降动画速度，基本上只是立即将它放在可用的列表中，但当我将项目放入一个完整的子列表时，该项目被放回到原始列表中太快，无法真正告诉它并没有放在子列表中。

我找到了允许设置还原功能的代码。这允许动画发生。因此，获取动画也没有问题。这是问题出现的地方。我想要＆＃34; snap＆＃34;发生在可用的列表上，但我希望在一个已满的列表上进行慢速还原，以便用户可以判断尝试失败以及它返回的位置。

这是我的代码：

    $( "#sortable" ).sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-sortable-placeholder",
    update: function(event, ui) {
        result = $(this).sortable('toArray');
        for (i=0; i < result.length; i++) {
            var number = result[i].replace(/[^0-9]/g, '')
            $("#div" + number).css("background-color","transparent");
        }
        var mylist = $(this);
        var listitems = mylist.children('li').get();
            listitems.sort(function(a, b) {
           return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
        })
        $.each(listitems, function(idx, itm) { mylist.append(itm); });
    }

}).disableSelection();

var result = [];

$( "#sortList1, #sortList2, #sortList3, #sortList4, #sortList5" ).sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-sortable-placeholder",
    receive: function(ui) {
        if($(this).children().length >=7) { //for at most 7 children in sortable
            $(this).children().addClass('filled');
            $(this).addClass('dontDrop');
            $('.connectedSortable').sortable('option', 'connectWith', $('.connectedSortable').not('.dontDrop'));
            $('.draggableOnly').draggable('option', 'connectToSortable', $('.connectedSortable').not('.dontDrop'));
        } else {
            $(this).children().removeClass('filled');
        }
    },
    remove: function(){
        if($(this).children().length <= 7){
            $(this).removeClass('dontDrop');
            $(this).children().removeClass('filled');
        }

        if($(this).parent().siblings().length <= 7) { //for at most 7 children in sortable
            $(this).parent().parent().children().removeClass('filled');
            $(this).parent().parent().removeClass('dontDrop');
            $('.connectedSortable').sortable('option', 'connectWith',$('.connectedSortable').not('.dontDrop'));
            $('.draggableOnly').draggable('option', 'connectToSortable',$('.connectedSortable').not('.dontDrop'));
        }
    },
    update: function(event, ui) {
        result = $(this).sortable('toArray');
        for (i=0; i < result.length; i++) {
            var number = result[i].replace(/[^0-9]/g, '')
            if ($(this).attr('id') == "sortList1") {
                $("#div" + number).css("background-color","#006800");
            } else if ($(this).attr('id') == "sortList2") {
                $("#div" + number).css("background-color","#00a200");
            } else if ($(this).attr('id') == "sortList3") {
                $("#div" + number).css("background-color","#00db00");
            } else if ($(this).attr('id') == "sortList4") {
                $("#div" + number).css("background-color","#aaff00");
            } else {
                $("#div" + number).css("background-color","#ffff00");
            }
        }
        var mylist = $(this);
        var listitems = mylist.children('li').get();
            listitems.sort(function(a, b) {
           return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
        })
        $.each(listitems, function(idx, itm) { mylist.append(itm); });
    }
}).disableSelection();

});

我可以设置它，以便通过在列表的初始化中使用以下内容来进行动画：

function initList() {
result = $("#sortable").sortable('toArray');
var indexNum = 0;
for (var competencyName in competencyListHash) {
    indexNum++;
    $("#div" + indexNum).css("background-color","transparent");
    var competencySpanText = competencyName + '<span style="width:500px;">' + competencyListHash[competencyName]['description'] + '</span>';
    $("#competency" + indexNum + "Title").html(competencySpanText);
}
$('.connectedSortable').sortable({revert: 100});
$( "#sortable" ).disableSelection();
}

然而，只允许所有事件的动画。这里有一些jsfiddle来检查它，但它在我的机器上更好地点击和拖动的功能：

http://jsfiddle.net/trout0525/p4763cva/1/

两个连接的可排序列表的大小限制，其中动画为停止限制

0 个答案: