How do i make dynamically created elements draggable()?

Asked
Active3 hr before
Viewed126 times

4 Answers

createddynamicallyelements
90%

Add draggable class to the dynamically added elements.,I'm calling the draggable method after I add the elements to the container, like this:,Basically Ive made a function called startDrag that makes the new blocks draggable:,What I settled on was listening for DOM inserts on the parent element and then applying .draggable() on the inserted children. For example:

Thank you in advance for the help!

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});
load more v
88%

Add draggable class to the dynamically added elements.,Basically Ive made a function called startDrag that makes the new blocks draggable:,I'm calling the draggable method after I add the elements to the container, like this:,What I settled on was listening for DOM inserts on the parent element and then applying .draggable() on the inserted children. For example:

at time of creation put class "draggable" or id in the element. (you are not putting class) and then code should work

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
load more v
72%

I'm trying to figure out how to make dynamically created divs draggable, so I've created this very simple thing to help me. I understand that I have to use the on() event with a non-dynamic handler. By having the body element handle the cloning event in the linked JSfiddle, I've succeeded in making the dynamically created divs clonable, but they are not draggable. What am I doing wrong? ,The other solution would be to render whole dashboardBody on the server side creating dynamically distinct uiOutputs...which wouldn't be pleasant.,In the example below you have 15 dynamically generated widgets,at time of creation put class "draggable" or id in the element. (you are not putting class) and then code should work

Thank you in advance for the help!

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});
load more v
65%

I am working on project. This is how do i make dynamically created elements draggable()? close but unable to solve it.,I am creating a dynamic divs and now trying to place events that is draggable(). For example:,How to add draggable() with dynamic div being created inside loop?

I am creating a dynamic divs and now trying to place events that is draggable(). For example:

var div1 = '<div class="orgchart"><div class="o_diagram">';
div1 += '<div class="content"></div> <div class="org_chart_id">-1</div><i class="edge verticalEdge bottomEdge fa"></i><i class="fa fa-info-circle second-menu-icon"></i><div class="second-menu"><img class="avatar add_node" title="Add New Child" id="-1" src="/vuente_automation/static/src/img/add.png"/></div></div>';
//this is the loop which creates div and i am trying to add draggable events to them
for (let key in edges){
            div1 += '<div draggable="true" id="'+edges[key].destination+'" data-parent="1" class="node product-dept"><div class="title">'+edges[key].destination+'</div><div class="content"></div><div class="org_chart_id">2</div><i class="edge verticalEdge topEdge fa"></i><i class="fa fa-info-circle second-menu-icon"></i><div class="second-menu"><img class="avatar add_node" title="Add New Child" id="'+edges[key].destination+'" src="/activity_workflow/static/src/img/add.png"><img class="avatar edit_node" title="Edit Department" id="'+edges[key].destination+edges[key].destination+'" src="/activity_workflow/static/src/img/edit.png"><img class="avatar delete_node" title="Delete Department" id="'+edges[key].destination+'" src="/activity_workflow/static/src/img/delete.png"></div></div>';

            $(div1).appendTo('.o_diagram').draggable(); //not happening anything

 }
 div1 += '</div> </div>';
 var chart_vew = div1
 // move the renderered diagram to the widget's $el
 $div.contents().appendTo(this.$diagram_container.append(chart_vew));
load more v

Other "created-dynamically" queries related to "How do i make dynamically created elements draggable()?"