Question

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

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

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

添加元素后，我使用Inspect Element（在Chrome中）查看生成的实际代码，它看起来像这样：

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

为什么不拖？

Answer 1

最有可能的原因是，当您执行设置拖动的代码时，该元素不存在。您需要使用live()监听器进行注册。

修改

由于我们没有处理事件，我猜live()不是一个选项。我很快就会找到解决方案，但首先让我解释一下你当前的代码是什么，以及为什么它不起作用。

您在评论中发布的代码段开始时会找到一组元素 - $('.draggable') - 您随后调用.draggable()以使其可拖动。第一个选择器返回的所有元素都将变为可拖动。这不是任何类型的“规则”，存储和持续检查，而只是一次性检索应用函数的项目。

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

因此，无论何时添加新项目以使其成为可拖动项，您都需要首先销毁当前的可拖动项：

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

...然后再次创建它，现在新项目在集合中：

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

应该这样做。

Answer 2

假设你有一个jquery选择器可以找到你想要拖放的所有元素，当你想要一些新添加的元素可拖动时，你可以使用相同的选择器在一个新表达式中，只选择那些没有ui-draggable类的表达式。

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

动态添加Draggable不会拖动

2 个答案: