Question

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

当我将可拖动的div封装在另一个div中时，奇怪的行为发挥作用。当它被封装时，它不会将clone元素设置为draggable，所以我无法重新拖动元素。但是，如果在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上的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);
}

JQuery Draggable - 奇怪的行为

1 个答案: