您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
用js控制组织结构图可以任意拖拽到指定位置
作者：佚名 责任编辑：admin 更新时间：2022-06-22
用js控制生成了一个组织结构图并设置这个组织结构可以任意拖动到指定位置，具体代码如下
首先用js控制生成了一个组织结构图 再设置这个组织结构可以任意拖动到指定位置 页面代码如下 具体代码 实例 可以去我资源空间下载 代码如下: <!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>部门组织架构图</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;">天云平台</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;">档案类</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;">档案</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;">档案</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;">档案</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;">档案</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;">搜索类</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;">搜索</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;">搜索</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;">搜索</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;">搜索</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;">分析类</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;">分析</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;">分析</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;">分析</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;">分析</span> </div> </div> </div> </div> </div> </div> </div> </body> </html>- 上一个程序编程： JS阻止冒泡事件以及默认事件发生的简单方法
- 下一个程序编程： json解析的四种方法分享
