Because the project needs to find information on the Internet that can be dragged to generate the organizational structure. Finding the jorgchart control took half a day to implement drag-and-drop to generate the easyui draggable droppable, of course, familiar with jqueryui, you can also use jquery UI the drag-and-drop function only provides basic functions. Hopefully, it can help users who need it ^
<! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1">
<Title> </title>
<LINK rel = "stylesheet" href = "/content/jorgchart-master/example/CSS/bootstrap.min.css"/>
<LINK rel = "stylesheet" href = "/content/jorgchart-master/example/CSS/jquery.jorgchart.css"/>
<LINK rel = "stylesheet" href = "/content/jorgchart-master/example/CSS/custom.css"/>
<Link href = "/content/jorgchart-master/example/CSS/prettify.css" type = "text/CSS" rel = "stylesheet"/>
<SCRIPT type = "text/JavaScript" src = "/content/jorgchart-master/example/pretworkflow. js"> </SCRIPT>
<SCRIPT src = "/scripts/jquery. Min. js"> </SCRIPT>
<SCRIPT src = "/content/jorgchart-master/jquery. jorgchart. js"> </SCRIPT>
<SCRIPT src = "/content/jquery-easyui-1.3.6/jquery. easyui. Min. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
VaR JSON = [{name: "Development Department", children: [{name: "Development Department", children: [{Name: 'Architecture group'}, {Name: 'ui group '}
, {Name: 'encoding group'}, {Name: 'db group'}]
},{ Name: "Development 2" },{ name: "Development 3" },{ name: "Development 4" },{ Name: "Development Five"}]
}];
$ (Function (){
$ ("# Org" ).html (createlist (JSON ));
$ ("# Org> ul"). jorgchart ({
Depth:-1,
Chartelement: '# chart'
});
Initdraggableanddroppable ();
});
Function initdraggableanddroppable (){
$ ('. Node'). draggable ({
Proxy: 'clone ',
Revert: True,
Cursor: 'move ',
Onstartdrag: function (){
$ ('. Node'). Not (this). addclass ("over ");
},
Onstopdrag: function (){
$ ('. Over'). removeclass ("over ");
}
});
$ ('. Node'). droppable ({
Accept: '. node ',
Ondragenter: function (E, source ){
$ (Source). draggable ('options'). cursor = 'auto ';
((Source).draggable('proxy'mirror.css ('border', '1px solid red ');
$ (This). addclass ('over ');
},
Ondragleave: function (E, source ){
$ (Source). draggable ('options'). cursor = 'not-allowed ';
((Source).draggable('proxy').css ('border', '1px solid # CCC ');
$ (This). removeclass ('over ');
},
Ondrop: function (E, source ){
Appendnode (JSON, $ (this). Text (), $ (Source). Text ());
}
});
}
Function createlist (jsondata ){
VaR html = '<ul> ';
For (VAR I = 0; I <jsondata. length; I ++ ){
HTML + = '<li>' + jsondata [I]. Name;
If (jsondata [I]. Children ){
HTML + = createlist (jsondata [I]. Children );
}
HTML + = '</LI> ';
}
HTML + = '</ul> ';
Return HTML;
}
Function appendnode (jsondata, parentname, childname ){
VaR nodechild = findnode (jsondata, childname );
Jsondata = removenode (jsondata, childname );
Jsondata = insertnode (jsondata, parentname, nodechild );
$ ("# Chart"). Hide ();
$ ("# Chart" example .html ('');
$ ("# Org" pai.html (createlist (jsondata ));
$ ("# Org> ul"). jorgchart ({
Depth:-1,
Chartelement: '# chart'
});
$ ("# Chart"). Show ();
Initdraggableanddroppable ();
JSON = jsondata;
}
Function insertnode (jsondata, parentname, childnode ){
For (VAR I = 0; I <jsondata. length; I ++ ){
VaR name = jsondata [I]. Name;
If (name = parentname ){
If (jsondata [I]. Children ){
Jsondata [I]. Children. Push (childnode );
}
Else {
VaR children = new array ();
Children. Push (childnode );
Jsondata [I]. Children = children;
}
}
Else if (jsondata [I]. Children ){
Jsondata [I]. Children = insertnode (jsondata [I]. Children, parentname, childnode );
}
}
Return jsondata;
}
Function removenode (jsondata, nodename ){
For (VAR I = 0; I <jsondata. length; I ++ ){
VaR name = jsondata [I]. Name;
If (name = nodename ){
Jsondata. splice (I, 1 );
}
Else if (jsondata [I]. Children ){
Jsondata [I]. Children = removenode (jsondata [I]. Children, nodename );
}
}
Return jsondata;
}
Function findnode (jsondata, nodename ){
For (VAR I = 0; I <jsondata. length; I ++ ){
VaR name = jsondata [I]. Name;
If (name = nodename ){
Return jsondata [I];
}
Else if (jsondata [I]. Children ){
VaR result = findnode (jsondata [I]. Children, nodename );
If (result ){
Return result;
}
}
}
}
</SCRIPT>
<Style type = "text/CSS">
. Over
{
Border: 6px solid red! Important;
}
</Style>
</Head>
<Body>
<Div id = "org" style = "display: none">
</Div>
<Div id = "chart" class = "orgchart">
</Div>
</Body>
</Html>