用js控制組織結(jié)構(gòu)圖可以任意拖拽到指定位置
更新時(shí)間：2014年01月17日 16:52:35 作者：
用js控制生成了一個(gè)組織結(jié)構(gòu)圖并設(shè)置這個(gè)組織結(jié)構(gòu)可以任意拖動(dòng)到指定位置，具體代碼如下
首先用js控制生成了一個(gè)組織結(jié)構(gòu)圖
再設(shè)置這個(gè)組織結(jié)構(gòu)可以任意拖動(dòng)到指定位置
頁(yè)面代碼如下 具體代碼 實(shí)例 可以去我資源空間下載
<!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>部門(mén)組織架構(gòu)圖</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;">天云平臺(tái)</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>
再設(shè)置這個(gè)組織結(jié)構(gòu)可以任意拖動(dòng)到指定位置
頁(yè)面代碼如下 具體代碼 實(shí)例 可以去我資源空間下載
復(fù)制代碼 代碼如下:
<!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>部門(mén)組織架構(gòu)圖</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;">天云平臺(tái)</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>
相關(guān)文章
javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法
這篇文章主要介紹了javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法,涉及javascript操作元素的相關(guān)技巧,需要的朋友可以參考下2015-05-05
javascript動(dòng)態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對(duì)觸發(fā)事件的元素進(jìn)行判斷，然后執(zhí)行不同的操作，下面是具體的實(shí)現(xiàn)，需要的朋友可以學(xué)習(xí)下2014-06-06
關(guān)于uniapp的request封裝保姆級(jí)教程
這篇文章主要給大家介紹了關(guān)于uniapp的request封裝保姆級(jí)教程,request是基于uni-app框架封裝的一個(gè)網(wǎng)絡(luò)請(qǐng)求庫(kù),可以用于發(fā)送http請(qǐng)求和處理響應(yīng)數(shù)據(jù),需要的朋友可以參考下2023-07-07
js實(shí)現(xiàn)tab選項(xiàng)卡切換功能
本文主要分享了javascript實(shí)現(xiàn)tab選項(xiàng)卡切換功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置
position 屬性規(guī)定元素的定位類型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
給應(yīng)用部分的js代碼設(shè)定一個(gè)統(tǒng)一的入口
javascript是種腳本語(yǔ)言，瀏覽器下載到哪兒就會(huì)執(zhí)行到哪兒，下面為大家介紹下，如何給應(yīng)用部分的js代碼一個(gè)統(tǒng)一的入口2014-06-06
這篇文章主要介紹了js字符串操作方法,實(shí)例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了javascript定時(shí)器完整實(shí)現(xiàn)方法,以實(shí)例形式分析了定時(shí)器的嵌套調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家分析了js閉包引起的事件注冊(cè)問(wèn)題，感興趣的小伙伴們可以參考一下2016-03-03
javaScript矢量圖表庫(kù)-gRaphael幾行代碼實(shí)現(xiàn)精美的條形圖/餅圖/點(diǎn)圖/曲線圖
gRaphael是一個(gè)致力于幫助開(kāi)發(fā)人員在網(wǎng)頁(yè)中繪制各種精美圖表的 Javascript庫(kù),你只需要編寫(xiě)幾行簡(jiǎn)單的代碼就能創(chuàng)建出精美的條形圖、餅圖、點(diǎn)圖和曲線圖,感興趣的朋友可以了解下2013-01-01