Javascript 如何在循环内创建动态div的情况下添加draggable（）？

我正在做这个项目。这是 接近但无法解决它

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

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

var div1=''；
div1+='-1'；
//这是创建div的循环，我正在尝试向其中添加可拖动的事件
用于（让键入边）{
div1+=''+边[键]。目标+'2'；
$（div1）.appendTo（'.o_图'）.draggable（）；//不发生任何事情
}
div1+=''；
var图表\u vew=div1
//将渲染图移动到小部件的$el
$div.contents（）.appendTo（此.$diagram\u container.append（chart\u vew））；

var div1=''；
div1+='-1'；
//这是创建div的循环，我正在尝试向其中添加可拖动的事件
用于（让键入边）{
div1+=''+边[键]。目标+'2'；
$（div1）.appendTo（'.o_图'）.draggable（）；//不发生任何事情
}
div1+=''；
$（'body'）.find（'o_图'）.draggable（）；//这就完成了动态元素的工作
var图表\u vew=div1
//将渲染图移动到小部件的$el`此处输入代码`
$div.contents（）.appendTo（此.$diagram\u container.append（chart\u vew））；

有人吗？对不起，没工作。若你们能看到里面的循环，我正在尝试添加可拖动的特性。在你们的建议修改了一些之后，OK开始工作了，谢谢

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