Question

我正在尝试动态创建可以拖动的div。我发现，整个父div都随之移动。如果我创建多个子div，它们也会与父级一起移动。我究竟做错了什么？这是我的代码：

$(function() {
    $( "button#new-child" )
        .button()
        .click(function( event ) {
            event.preventDefault();
            $("#creation-box").append("<div class='draggable  ui-widget-content'><p>Drag me around</p></div>").draggable();

        });
});

和html

<body>
<div id="toolbar">
<div class="header"> <h3>Toolbar</h3></div>
<button id="new-child">New Child</button>
</div>

<div id="creation-box">
<div class="header"><h3>Creation Box</h3></div>
</div>

</body>

Answer 1

因为您将父级设置为可拖动。仅在创建后将新元素设置为可拖动。

顺便说一句，.append()没有回调，所以只需在元素创建后添加.draggable。

$(function() {
    $( "button#new-child" )
        .button()
        .click(function( event ) {
            event.preventDefault();
            $("#creation-box").append("<div id='new-element-with-unique-id' class='draggable ui-widget-content'><p>Drag me around</p></div>");

            $("#new-element-with-unique-id").draggable();

        });
});

如何将子div设置为可拖动而不是父级

1 个答案: