2

我将简化我的解释，以便您了解我在做什么。我有两个 div 并且我设置了如图所示的 portlet ，但是我正在动态注入我的 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...
        }
    }
});
4

1 回答 1

2

您可以使用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/

于 2013-10-03T15:27:01.857 回答