javascript - Jquery sortable - 限制 droppables

Question

我将简化我的解释，以便您了解我正在做的事情。我有两个 div，并且设置了 portlet，如图 here 所示。 ，但是我动态注入(inject)我的 portlet，没有什么大问题。

<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>  

这是 JavaScript

$( ".myrow" ).sortable({
    connectWith: ".myrow",
    revert: true,
    beforeStop: function( event, ui ) {}
});

我试图最多只允许一个 droppable 进入 mainallapplicant。如果已经有一个项目，我将显示一个确认对话框，并根据答案，取消删除或移出现有项目并将其替换为新项目。我尝试了以下方法，但一无所获。

$( ".myrow" ).sortable({
    connectWith: ".myrow",
    revert: true,
    start: function(event, ui) {
        if ($(this).prev().find(".portlet").length == 1) {
            ui.sender.draggable("cancel");
        }
    },
    stop: function(event, ui) {
        if ($(this).prev().find(".portlet").length == 1) {
            ui.item.remove();
            // Show an error...
        }
    }
});

Answer 1

您可以使用 start 获取 portlet 元素的当前计数，然后使用 stop 进行检查 另请注意，我向每个 div 添加了类名称，以允许只有一个 div 最多有 1 个 portlet

$(document).ready(function () {
    $.count = 0;
    $(".myrow").sortable({
        connectWith: ".myrow",
        revert: true,
        start: function () {
            $.count = $(".myrow").has(".portlet").length;
            console.log("Start " + $.count);
        },
        stop: function (event, ui) {
            if ($(ui.item).parent(".myrow").hasClass("left")) {
                if ($.count == 2) {
                    $(".myrow").sortable("cancel");
                }
            }
        }
    });
});

演示:http://jsfiddle.net/Ue4dq/