Home/ Questions/Q 8829107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:45:33+00:00

I am trying to dynamically create divs which will then be draggable. I found

  • 0

I am trying to dynamically create divs which will then be draggable. I found though, that the entire parent div moves along with it. If I create multiple child divs, they also move together with the parent. What am I doing wrong?
Here is my code:

$(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();

        });
});

and the 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because you set the parent as draggable. Set your new element as draggable after creation only.

    BTW, .append() doesn’t have callback, so just add the .draggable after element creation.

    $(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();

        });
});
    • 0