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