jQuery可拖動-奇怪的行為

Question

我有一個可拖動元素，我正在創建該元素的副本並將其拖動到放置區域。 我希望一旦將其正確放置在放置區域中，即可拖動元素就可以重新拖動。

當我將可拖動div封裝在另一個div中時，奇怪的行為開始起作用。 封裝后，它將不會將clone元素設置為可拖動，因此我無法重新拖動該元素。 但是，如果在jFiddle中，將div從可拖動的div周圍移除，則該方法工作正常。

工作：

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

不起作用：

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

我需要知道為什么封裝會對此胡鬧。 似乎很難用這樣的問題來構建有意義的東西，因為我希望有一個包含多個類似於這些的可拖動對象的邊欄。 由於構建側邊欄需要將所有這些可拖動元素封裝在另一個div中，因此您可以看到我遇到的難題。

下面的jFiddle鏈接包含Jquery，等等。

這是無法正常工作的jFiddle： 這是 。
而且，這是可以正常工作的jFiddle： 這是 。

唯一不起作用的區別是：圓頂類div由另一個div封裝。

Answer 1

您需要刪除blah上的可拖動對象，並將可拖動對象添加到附加在停止塊中的克隆中。 嘗試這個：

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