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

Question

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

我的正文有以下样式

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

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

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

然后，我在正文中添加了这个脚本，该脚本在单击按钮时创建可拖动的内容，并且根据我的理解，该代码使所有具有 id="draggable"的内容都可拖动。

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

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

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

我不确定这有什么问题。我看过类似事物的一些不同示例，但似乎这应该可行。我缺少什么？我正在使用 bootstrap，但没有使用其他框架。

如何制作一个新的 div 以及通过按下按钮创建的所有其他 div，可拖动？

Answer 1

这里的例子http://jsfiddle.net/eb34jztf/

您需要为每个新创建的元素启动可拖动功能，并且以后请不要在一个页面上使用相同的 id 值:)

$("#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