1

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

当我将可拖动的 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 封装。

4

1 回答 1

0

您需要删除 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);
}
于 2013-01-29T05:21:25.957 回答