CODEWITHSUNDEEP
javascriptjqueryhtmlunderscore.js
giantmalik
giantmalik

Reputation: 137

How to add draggable() with dynamic div being created inside loop?

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:

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

Upvotes: 2

Views: 135

Answers (1)

Maddukuri sandeep
Maddukuri sandeep

Reputation: 36

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>';
$('body').find('.o_diagram').draggable(); // This does the work for dynamic elements
 var chart_vew = div1
 // move the renderered diagram to the widget's $el`enter code here`
 $div.contents().appendTo(this.$diagram_container.append(chart_vew));

Upvotes: 2

Related Questions