uses JS control to generate an organization chart and set the organization structure to drag to a specific location, as follows
First Use JS control to generate an organization chart Then set this organization can be dragged to the specified location page code as follows specific code examples can go to my resource space download code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <title> Department Organization Chart </ title> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <link href= css.css" type= "Text/css" rel= "stylesheet"/> <script "src=" Jquery-1.8.3.min.js "type=" Text/javascript "></script> <script src=" Jquery.ui.draggable.min.js " Type= "Text/javascript" ></script> <script src= "main.js" type= "Text/javascript" ></script > </head> <body style= "Overflow:hidden;" > <div class= "Strt-wrap" id= "Strtwrap" > <div class= "Strt-block" > <div class= " Strt-part "> <span class=" Strt-name "style=" background: #6D6D6D; coloR:white; " > Day Cloud Platform </span> <div class= "line-v" ><span></span></div> <div class= " Strt-block "> <div class=" Strt-part "> <span class=" Line-h line-h-r "></span> <div class= "Line-v" ><span></span></div> <span class= "Strt-name" style= "Background" : #DBA659; color:white; " > Archive class </span> <div class= "line-v" ><span></span></div> <div class= " Strt-block "> <div class=" Strt-part "> <span class=" Line-h line-h-r "></span> <div class= "line-v" ><span></span></div> <span class= "Strt-name" Background: #DBA659; color:white; " > Archives </span> </div> <div class= "Strt-part" > <span class= "Line-h line-h-c" ></span> <div class= "line-v" ><span></span></div> <span class= " Strt-name "style=" background: #Dba659;color:white; " > Archives </span> </div> <div class= "Strt-part" > <span class= "Line-h line-h-c" ></span> <div class= "line-v" ><span></span></div> <span class= " Strt-name "style=" background: #DBA659; color:white; " > Archives </span> </div> <div class= "Strt-part" > <span class= "Line-h line-h-l" ></span> <div class= "line-v" ><span></span></div> <span class= " Strt-name "style=" background: #DBA659; color:white; " > Archives </span> </div> </div> </div> <div class= "Strt-part" > <span class= "line-h line-h-c" ></span> <div class= "Line-v" ><span></span> </div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Search class </span> <div class= "line-v" ><span></span></div> <div class= " Strt-block "> <div class=" Strt-part "> <span class=" Line-h line-h-r "></span> < Div class= "line-v" ><span></span></div> <span class= "Strt-name" style= "Background": # 679bcc;color:white; " > Search </span> </div> <div class= "Strt-part" > <span class= "line-h Line-h-c "></span> <div class=" line-v "><span></span></div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Search </span> </div> <div class= "Strt-part" > <span class= "Line-h line-h-c" ></span> <div class= "line-v" ><span></span></div> <span class= " Strt-name "style=" background: #679BCC; color:white; " > Search </span> </div> <div class= "Strt-part" > <span class= "line-h Line-h-l "></span> <div class=" Line-v "><span></span></div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Search </span> </div> </div> </div> <div class= "Strt-part" > <span class= "line-h line-h-l" ></span> <div class= "Line-v" ><span></span> </div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Analysis class </span> <div class= "line-v" ><span></span></div> <div class= " Strt-block "> <div class=" Strt-part "> <span class=" Line-h line-h-r "></span> <div class= "Line-v" ><span></span></div> <span class= "Strt-name" style= "Background" : #679BCC; color:white; " > Analysis </span> </div> <div class= "Strt-part" > <span class= "Line-h line-h-c" ></span> <div class= "line-v" ><span></span></div> <span class= " Strt-nAme "style=" background: #679BCC; color:white; " > Analysis </span> </div> <div class= "Strt-part" > <span class= "line-h Line-h-c "></span> <div class=" line-v "><span></span></div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Analysis </span> </div> <div class= "Strt-part" > <span class= "line-h Line-h-l "></span> <div class=" line-v "><span></span></div> <span class= "Strt-name" style= "background: #679BCC; color:white;" > Analysis </span> </div> </div> </div> </div> </div> </div> </div> </body> </html>