First, an organizational structure is generated using js control.
You can drag the organizational structure to the specified position.
The page code is as follows: the specific code instance can be downloaded from my Resource Space
Copy codeThe 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 structure </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;"> cloud platform </span>
<Div class = "line-v"> <span> </div>
<Div class = "strt-block">
<Div class = "strt-part">
<Span class = "line-h-r"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # DBA659; color: white;"> archives </span>
<Div class = "line-v"> <span> </div>
<Div class = "strt-block">
<Div class = "strt-part">
<Span class = "line-h-r"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # DBA659; color: white;"> archives </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # DBA659; color: white;"> archives </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # DBA659; color: white;"> archives </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-l"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # DBA659; color: white;"> archives </span>
</Div>
</Div>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> Search class </span>
<Div class = "line-v"> <span> </div>
<Div class = "strt-block">
<Div class = "strt-part">
<Span class = "line-h-r"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> Search </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> Search </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> Search </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-l"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> Search </span>
</Div>
</Div>
</Div>
<Div class = "strt-part">
<Span class = "line-h-l"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> analysis class </span>
<Div class = "line-v"> <span> </div>
<Div class = "strt-block">
<Div class = "strt-part">
<Span class = "line-h-r"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> analysis </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> analysis </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-c"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> analysis </span>
</Div>
<Div class = "strt-part">
<Span class = "line-h-l"> </span>
<Div class = "line-v"> <span> </div>
<Span class = "strt-name" style = "background: # 679BCC; color: white;"> analysis </span>
</Div>
</Div>
</Div>
</Div>
</Div>
</Div>
</Div>
</Body>
</Html>