jquery - jquery ui 可排序列表 - 完整：反应

Question

我想阻止连接的 jquery-ui 可排序列表接受不超过给定数量的项目。

我走了这么远：http: //jsfiddle.net/9yzea/6/

在第 66 行添加什么以防止“#playlist”对悬停在其上方的新项目做出反应？我希望它对“完整”的特殊行为做出反应。还是有更好的方法？

谢谢

$(function() {   $( "#playlist" ).sortable({
    cursor: "move",
    handle: ".handle",
    revert: 100,
    opacity: 0.8,
    delay: 50,
    placeholder: "sortable-placeholder",
    stop: function(event, ui) {
        var size = $("#playlist li.track").size();
        $("#music").append(size+" ");
        sizeCheck();
        if (playlistFull) {
            $("#music").append("full ");
            } else { 
            $("#music").append("space ");
            };
        playlistWatcher();
        },
    start: function(event, ui) {
        if (playlistFull) {
            // $(ui.item).sortable('cancel');  // What to do here?
            };
        },
    }).disableSelection();
});

Answer 1

编辑

您可以像这样删除项目stop:：

    stop: function(event, ui) {
        if (playlistFull) 
           ui.item.remove();
        var size = $("#playlist li.track").size();
        $("#music").append(size+" ");
        sizeCheck();
        if (playlistFull) {
            $("#music").append("full ");
            } else { 
            $("#music").append("space ");
            };
        playlistWatcher();
        },
    start: function(event, ui){
        if (playlistFull){                       
            $(ui.sender).draggable('cancel');
        }
    }

Answer 2

你现在最好的选择是在 sortable 满后禁用它。

function playlistWatcher() {
    // $("#music #playlist li a.addrem").html("remove");
    // $("#music #tracks li a.addrem").html("add to playlist");
    if (playlistFull) {
        $("#alert").show();
         $( "#playlist" ).sortable("disable");
        //$( "#tracks li" ).draggable("option", "connectToSortable", null );
    } else {
        $("#alert").hide();
        }; 
    };

更新的小提琴

我正在尝试更多更好的解决方案，并在找到时通知您。