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

Posted 2023-05-08

【中文标题】如何在循环内创建动态 div 添加可拖动（）？

【英文标题】：How to add draggable() with dynamic div being created inside loop?

【发布时间】：2020-04-29 21:04:11

【问题描述】：

我正在做项目。这是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));

【问题讨论】：

任何人?????????????????????????

【参考方案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));

【讨论】：

抱歉没有工作。如果您可以看到内部循环，我正在尝试添加可拖动功能

好的，根据你的建议做了一些修改，谢谢