jquery动态创建可拖动divs

在我的项目中，每次你点击一个按钮，用jquery动态创建div。现在我想要这些新的div具有可拖动和可调整大小的属性。以下是香港专业教育学院迄今所做的：jquery动态创建可拖动divs

$("#button1").click(function(){ 
    $("<div/>", { 
     "id": "test", 
     text: "", 
     }).appendTo("body"); 
    $("#test").resizable(); 
    $("#test").draggable(); 
    });

此代码工作在某种程度上，问题是，只有已创建的第一个div是可调整大小和可拖动。也有可能把另一个按钮，以删除这些新创建的div？

来源

2012-04-25 man_or_astroman

id必须是唯一的！您创建具有相同test ID多个div =>无效的HTML

另一件事，你并不需要查询DOM，你可以使用你必须使创建<div>resizable和draggable参考：

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test", 
     text: "", 
     }).resizable().draggable() 
     .appendTo("body"); 
    });

如果你想使用的ID出于某种原因：

var counter = 1; 

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test" + (counter++), 
     text: "", 
     }).resizable().draggable() 
     .appendTo("body"); 
    });

#id选择注释在docs site：

每个id值只能在文档中使用一次。如果多个元素被分配了相同的ID，那么使用该ID的查询将仅选择DOM中第一个匹配的元素。不过，这种行为不应该依赖。具有多个使用相同ID的元素的文档无效。

来源

2012-04-25 07:31:17 gdoron

感谢名单的答案！那么我怎样才能用一个按钮为每个div创建不同的id？ – 2012-04-25 07:51:25

@ lucky13。您可以使用变量来存储计数器**请参阅更新**。或者只是使用类。 – gdoron 2012-04-25 07:53:58

非常感谢！现在一切正常！现在的另一个问题..是否可以添加另一个按钮，以删除所有创建的div？ – 2012-04-25 07:57:35

你应该给不同的ID为每点击或者使用类类似名称的..

$("#button1").click(function(){ 
    $("<div/>", { 
     "class": "test", 
     text: "", 
     }).appendTo("body"); 
    $(".test").resizable(); 
    $(".test").draggable(); 
    });

来源

2012-04-25 07:33:13

jquery动态创建可拖动divs

回答

相关问题