Javascript JQuery-如何在每次按下按钮时创建新的可拖动div

使用JQuery，我需要能够按下按钮并创建一个可拖动的div

我的身体有以下风格

    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>

#拖拉的{
宽度：100px；
高度：100px；
背景：#ccc；
}

这是我希望放置div的容器，以及创建新div的按钮。当我在页面加载时创建div时，它是可拖动的，并按预期工作

    <container id="area">
        <a class="btn btn-primary" id="create_block">Create</a>
        <div id="draggable">Draggable</div>
    </container>

创造
拖动

然后，我在正文中创建了这个脚本，它在单击按钮时创建了draggable，根据我的理解，代码使id=“draggable”的所有内容都成为可拖动的

    <script>
        $( "#create_block" ).click( function() {
            $( '<div/>' ).attr({
                'id' : 'draggable'
            }).appendTo("#area");
        });

        $( '#draggable' ).draggable();
    </script>

$（“#创建_块”）。单击（函数（）{
$（''）.attr({
'id'：'draggable'
}).附于（“面积”）；
});
$（'#draggable'）.draggable（）；

当我单击按钮时，它会创建一个样式正确的div，但它是不可拖动的

我不确定这有什么问题。我看过一些类似的例子，但似乎这应该是可行的。我错过了什么？我使用的是bootstrap，但没有其他框架

---

如何创建一个新的div以及通过按下按钮创建的所有其他div，draggable？

虽然一开始它似乎不直观，但您的

$（“#draggable”）。draggable（）

调用并没有执行您认为它正在执行的操作。这并不是说“使id为

draggable

draggable的所有元素都可拖动”

它所做的是执行一个选择，以返回页面上与

#draggable

匹配的所有元素。然后将名为

draggable

的方法应用于这些元素中的每一个。此时执行完成。没有正在运行的侦听器

当您创建一个新元素时，您需要确保它也是可拖动的，如果您想要的话。类似这样：（注意链接到新元素创建的

.draggable（）

）

$（“#创建_块”）。单击（函数（）{
$（''）.attr({
'id'：'draggable'
}).appendTo（“#area”）.draggable（）；
});
$（'#draggable'）.draggable（）；

由于该元素在您第一次将其设置为可拖动时不存在，因此在第一次遍历时未包含该元素

另外，有些不相关，但除非在添加第二个可拖动div之前删除第一个可拖动div，否则您将希望为元素选择一个唯一的id（或者设置一个可拖动的类而不是id）。id应该是页面上元素的唯一标识符。如果有多个元素具有相同的id，您将遇到问题。

这里的示例

您需要启动每个新创建的元素的Dragable，请以后不要在一个页面上使用相同的id值：）

$（“#创建#块”）。单击（函数（）{
$（''）.attr({
“类”：“可拖动”
}).draggable（）.appendTo（“#area”）；
//在每个新创建的元素上启动Dragable
});
//如果仅在单击时创建可拖动元素，则不需要此部分
$（'.draggable'）.draggable（）；//启动您已经拥有的第一个可拖动元素

不能有多个元素具有相同的id名称@博扬，我会记住这一点，谢谢。我不知道为什么这会让选票下降，但我非常感谢你对一切的解释。谢谢

 <script>
    $( "#create_block" ).click( function() {
        $( '<div/>' ).attr({
            'id' : 'draggable'
        }).appendTo("#area").draggable();
    });

    $( '#draggable' ).draggable();
</script>

$("#create_block").click(function () {
$('<div/>').attr({
    'class': 'draggable'
}).draggable().appendTo("#area");
  //initiate draggable on every new created elements
});


//Don't need this part if the draggable elements are only created on click
$('.draggable').draggable(); // initiate the first draggable element that you already have