JQuery Draggable - 奇怪的行为

Question

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

当我将可拖动的 div 封装在另一个 div 中时，奇怪的行为开始发挥作用。封装的时候不会将clone元素设置为可拖动，所以不能重新拖动元素。但是，如果在 jFiddle 中，您从可拖动 div 周围删除 div，则一切正常。

工作：

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

不工作：

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

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

下面的 jFiddle 链接包含 Jquery 等。

这是无法正常工作的 jFiddle：here。
而且，这是正常工作的 jFiddle：here。

唯一的区别是不工作：圆顶类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);
}