使用场景
如图所示，转换器和过滤器类型的组件需要支持下拉框，为此实现了两个版本的组件选择功能，第一个版本是点击下拉框中的元素，在转换器的位置对组件进行更换，有点反人类，换成了现在的版本，下拉框中的内容能够直接拖拽。
实现过程
实现的思路还是新建不同的元素，插入到下拉框中。
主要html：
<ul class="list-inline control-container" id="upContainer" style="text-align:center;height: 60px; width: 100%"><li> <div class="dropdown"> <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <img src="<l:asset path='../dmas/dataway/img/design/converter.png'/>" /> 转换器 <span class="caret"></span> </a> <ul class="dropdown-menu dropdown-menu-right ue-dropdown-menu" id = "zhqul"></li> </ul> </div> </li> 主要js代码:
function addSelectSidebar(graph, sidebar, image, name, doc, none, htmlSelect, className, type) { var funct = function (graph, evt, cell, x, y) { var parent = graph.getDefaultParent(); var model = graph.getModel(); var v1 = null; var node = doc.createElement(type); /*node.setAttribute("name",name);*/ node.setAttribute("label", name); node.setAttribute("dbtype",''); /*node.setAttribute("dataid","dataid");//指向数据库*/ var style = ''; if (name == '源库') { style = 'state;'; } else if (name === "SQL") { style = 'end;'; } model.beginUpdate(); try { v1 = graph.insertVertex(parent, null, node, x, y, 40, 40, style + 'shape=image;image=' + image + ';verticalLabelPosition=bottom;verticalAlign=top'); v1.setConnectable(true); } finally { model.endUpdate(); } graph.setSelectionCell(v1); } var div = document.createElement('li'); //div.style.height = '60px'; //div.style.width = '110px'; //div.style.paddingRight = '20px'; if (none != 'false') { div.style.display = 'none'; }else{ div.style.display = 'block'; } div.id = name; div.className = "dropdown"; div.name = className; var text = document.createElement('a'); text.style.display = 'inline'; text.innerHTML = ' ' + name + ' '; var img = document.createElement('img'); img.setAttribute('src', image); /*img.style.display='inline';*/ img.style.width = '30px'; img.style.height = '30px'; div.appendChild(img); div.appendChild(text); sidebar.appendChild(div); var dragElt = document.createElement('img'); dragElt.setAttribute('src',image); dragElt.style.width = '40px'; dragElt.style.height = '40px'; var ds = mxUtils.makeDraggable(div, graph, funct, dragElt, 0, 0, true, true); ds.setGuidesEnabled(true); }; 来源：51CTO
作者：L.南瓜
链接：https://blog.csdn.net/L_nangua/article/details/100865400