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

使用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，但它不可拖动。

我不确定是什么不适。我看过一些类似情况的不同示例，但似乎应该可以。我想念什么？我正在使用引导程序，但没有其他框架。

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

最佳答案

此处的示例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