Jquery-ui可拖动且动态的Jquery-ui可拖动？

这是我的代码来自http://jqueryui.com/demos/draggable/

             .draggable { width: 150px; height: 150px; padding: 0.5em; }   $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='
Drag me around
'; $('.demo').append(htmlData); }); });    
 
 
Drag me around
 
 
Test 
 
   

Iam动态制作可拖动组件，你可以在函数iam中看到使用append。 但是，虽然我已经给出了jquery-ui生成的类，但是新生成的drggable对象并没有拖动。

Answer 1

尝试调用$( ".draggable" ).draggable(); 一旦添加了动态创建的元素。

 $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='
Drag me around
'; $('.demo').append(htmlData); $( ".draggable" ).draggable(); }); }); 

工作演示

Answer 2

我实际上是出于性能原因而说，而是使用：

 $('.draggable:not(.ui-draggable)').draggable(); 

这将阻止尝试使用jQuery UI的内置类重新初始化已经可拖动的元素。 此外，如果你的代码修改了可能与新的draggable属性不匹配的单个draggable的属性，你可能最终会重置一些。

使用jQuery没有任何问题。

UPDATE

没有指定使用它的实例。 基于里卡多的编辑：

 $(function() { $( ".draggable" ).draggable(); $('.content').click(function(){ var htmlData='
Drag me around
'; $('.demo').append(htmlData); $('.draggable:not(.ui-draggable)').draggable(); //Here }); }); 

我现在也看到你手动添加ui-draggable类。 你不需要这样做。 事实上，它使我说的不起作用。

Answer 3

只需要改变位置

Answer 4

我建议这样做，因为如果你想将配置对象传递给draggable函数，你不必在两个不同的地方重复它：