Javascript JQuery可拖动-奇数行为

我有一个可拖动的元素，我正在创建该元素的克隆并将其拖动到拖放区域。我希望Dragable元素在放置区正确设置后可以重新拖动

当我将可拖动的div封装到另一个div中时，这种奇怪的行为就开始起作用了。当它被封装时，它不会将克隆元素设置为可拖动，因此我无法重新拖动该元素。但是，如果在jFiddle中，从可拖动div的周围移除div，则效果良好

工作：

<div id="draggable"></div>

不工作：

<div><div id="draggable"></div></div>

我需要知道为什么封装会在这方面胡闹。对于这样的问题，似乎很难构建一个有意义的东西，因为我希望有一个包含多个类似于这些的拖拽的边栏。由于构建边栏需要将所有这些可拖动的元素封装在另一个div中，因此您可以看到我遇到的难题

下面的jFiddle链接包含Jquery等

这是一把不能正常工作的小提琴：。
下面是正确工作的jFiddle:

---

唯一不起作用的区别是：dome类div被另一个div封装。

您需要删除blah上的draggable，并将draggable添加到stop块中附加的克隆中。 试试这个：

$(function() {
    var i=1;
    var indexP;
    var blah

    $(".dome").draggable({
        revert: 'invalid',
        helper: 'clone',
        start: function(event, ui) {
            var newId = i;
            $(ui.helper).attr("id",newId);
            indexP = $(ui.helper).attr('id');
            blah = "#" + indexP;
        },
        stop: function(event, ui) {
            $(ui.helper).append("<br><span>"+blah+"</span>");
            $(ui.helper).clone().appendTo('#cont').draggable();

            i++;
        },

    });

    $("#cont").droppable({

    });     
});
function updateStatus (x,y,i) {
    var xPos = "#x" + i;
    var yPos = "#y" + i;
    $(xPos).text(x);
    $(yPos).text(y);
}

$（函数（）{
var i=1；
var-indexP；
var布拉
$（“.dome”）.draggable({
还原：“无效”，
助手：“克隆”，
开始：功能（事件、用户界面）{
var-newId=i；
$（ui.helper.attr（“id”，newId）；
indexP=$（ui.helper.attr（'id'）；
blah=“#”+indexP；
},
停止：功能（事件、用户界面）{
$（ui.helper.append（“
”+blah+”）；
$（ui.helper.clone（）.appendTo（'#cont'）.draggable（）；
i++；
},
});
$（“#续”）.可拖放({
});     
});
函数updateStatus（x，y，i）{
var xPos=“#x”+i；
var yPos=“#y”+i；
$（xPos）文本（x）；
$（yPos）文本（y）；
}

如果移动外部div，使其在容器之后结束，它将开始工作。太好了，为什么我不能通过它的id来引用它呢？