Question

我会简化我的解释，让你得到我正在做的事情。我有两个div，我设置了如here所示的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 ) {}
});

我试图允许最多只有一个dropable到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");
                }
            }
        }
    });
});

DEMO：http://jsfiddle.net/Ue4dq/

Jquery可排序 - 限制droppables

1 个答案: