Jquery UI动态创建可放置区域

问：

我尝试制作多拖放区域（JQueryUI）。页面加载后无法追加可放置区域。我的目的是创建动态可放置的新区域（一个或多个）。

例 droppable-area in droppable-area in droppable-area............

HTML 端

<div class="control">
     <label class="control-label" id="label_0">Data</label>
</div>
<div class="control">
     <div class="col drop-area" id="area_0">New Droppable Area</div>
</div>

<div class="drop-area"></div>

此代码适用于非动态创建区域。

$('.control').draggable({
    connectToSortable: '.drop-area',
    helper: 'clone'
});

$('.control').on("dragcreate", function () {
    $(this).addClass("active");
});

var removeIntent = false;
$('.drop-area').sortable({
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    over: function () {
        removeIntent = false;
    },
    out: function () {
        removeIntent = true;
    },
    beforeStop: function (event, ui) {
        if (removeIntent == true) {
            ui.item.remove();
        }
    },
    receive: function (event, ui) {
        checkId(ui.item);
    }
});


function checkId(elem) {
    var curId = elem.children().children().prop("id");
    var lastId = $('.drop-area').find("[id^='" + curId + "']").last().prop('id');

    var splitStr = lastId.split("_");
    var idName = splitStr[0];
    var idNum = splitStr[1];

    if (isNaN(idNum)) {
        idNum = 1;
    } else {
        idNum++;
    }

    elem.children().children().prop("id", idName + "_" + idNum);
}

我尝试通过拖动或单击按钮来添加它，但这两种方法都不起作用。不检测拖曳

<div class="control">
     <div class="col drop-area" id="area_0">New Droppable Are</div>
</div>

$(".drop-area").append("<div class='drop-area ui-droppable'></div>");

我提前感谢您的帮助