萬盛學電腦網 >> 腳本專題 >> javascript >> 用js控制組織結構圖可以任意拖拽到指定位置
用js控制組織結構圖可以任意拖拽到指定位置
用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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved