javascript - JQuery Draggable - 奇怪的行为

Question

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

当我将可拖动的 div 封装到另一个 div 中时，奇怪的行为就会发挥作用。当它被封装时，它不会将克隆元素设置为可拖动，因此我无法重新拖动该元素。但是，如果在 jFiddle 中，您从可拖动 div 周围删除 div，则一切正常。

工作:

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

不工作:

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

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

下面的 jFiddle 链接包含 Jquery 等。

这是无法正常工作的 jFiddle:here .
并且，这是正常工作的 jFiddle:here .

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

Answer 1

您需要删除 blah 上的可拖动对象，并将可拖动对象添加到附加在停止 block 中的克隆中。 试试这个:

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