First of all, using JS control to generate an organization chart
You can also set this organization to drag to a specific location
Page code The following specific code examples can go to my resource space to download
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<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 category </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;" > 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>