动态添加的可拖动元素无法拖动

Question

动态添加的可拖动元素无法拖动

3

我正在动态添加一个可拖动的 DIV，但当我点击并按住它以拖动时，它不会移动。我是这样添加的：

$("#leftPersonalContent").append(leftSlotContent);
$("#" + firstID).addClass("ui-draggable");

其中leftSlotContent的形式为<div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div>，而firstID为"puzzlePiece_left_2"。

元素被添加后，我使用Chrome的“检查元素”功能查看生成的实际代码，结果如下：

<div id="puzzlePiece_left_2" class="personal draggable ui-draggable">....</div>

为什么它不能拖动？

- Luke

抱歉，leftContentSlot的形式为“div id =”puzzlePiece_left_2“class =”personal draggable ui-draggable“> ... </ div”。 - Luke

2个回答

2

假设您有一个jQuery选择器，可以找到所有要使其可拖动的元素。当您希望使一些新添加的元素可拖动时，您可以在一个新表达式中使用相同的选择器，仅选择那些没有ui-draggable类的元素。请保留HTML标签。

$(".selector:not(.ui-draggable)").draggable(draggableOptions);

- calasyr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Hedlund · Accepted Answer

很可能是因为在执行拖放设置代码时，元素尚不存在。您需要使用live()监听器进行注册。

编辑

由于我们没有处理事件，我想live()不是一个选择。我很快就会给出解决方案，但首先让我解释一下您当前代码的情况以及为什么无法正常工作。

您在此处发布的片段始于查找一组元素 - $('.draggable') - 然后调用.draggable()使它们可拖动。由该第一选择器返回的所有元素都将被设置为可拖动。这不是任何形式的“规则”，也不是存储和持续检查的简单一次性检索项目应用功能。

在执行此代码时，选择器$('.draggable')不会在其结果集中返回您的DIV，因为此时它不存在。当它突然存在时，这仍然不会改变它曾经被$('.draggable')返回的项目之一的事实，当可拖动项被初始化时。但是，如果现在执行该查询，它将被返回，因此我们需要做的就是再次执行相同的查询。

因此，每当您添加新项目以进行拖放时，您需要首先销毁当前可拖动项：

$('.draggable').draggable('destroy');

...然后再创建一次，因为新项目已经在集合中:

$('.draggable').draggable( { your options... } );

那应该就可以了。