Javascript Jquery可排序-限制可拖放项

我会简化我的解释，让你明白我在做什么。我有两个div，我设置了Portlet，如图所示，但是我动态注入我的Portlet，没有什么大问题

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

我正在尝试最多只允许一个可拖放到主应用程序中。如果已经有一个，我将显示一个确认对话框，根据答案，我取消删除或移出现有项目，并将其替换为新项目。我尝试了以下方法，但毫无结果

$( ".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...
        }
    }
});

---

您可以使用

start

获取portlet元素的当前计数，然后使用

stop

进行检查 还请注意，我向每个div添加了类名，以便只允许一个div最多有一个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");
                }
            }
        }
    });
});

演示：

$(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");
                }
            }
        }
    });
});