如何在循环内创建动态 div 添加可拖动（）？

Question

我正在做项目。这是how do i make dynamically created elements draggable()? 关闭但无法解决。

我正在创建一个动态 div，现在尝试放置可拖动 () 的事件。例如：

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

Answer 1

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