首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用js控制组织结构图可以任意拖拽到指定位置

Posted in Javascript onJanuary 17, 2014

首先用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控制组织结构图可以任意拖拽到指定位置

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 #Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 #Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 #Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 #Javascript
js使用eval解析json(js中使用json)
Jan 17 #Javascript
js window.open弹出新的网页窗口
Jan 16 #Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 #Javascript
内存池(1) TaiShan(1) JDK(1) 云服务器(1) Hadoop(1) queue(1) Simhash(1) 控制流(1) RecyclerView(1) 九宫格(5)
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP 基本语法格式
2009/12/15 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Js动态创建div
2008/09/25 Javascript
javascript 写类方式之十
2009/07/05 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
2017/01/23 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python基于回溯法子集树模板解决旅行商问题（TSP）实例
2017/09/05 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python计算二维矩形IOU实例
2020/01/18 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python turtle库的画笔控制说明
2020/06/28 Python
django rest framework 自定义返回方式
2020/07/12 Python
英国在线汽车和面包车零件商店：Car Parts 4 Less
2018/08/15 全球购物
BannerBuzz加拿大：在线定制横幅印刷、广告和标志
2020/03/10 全球购物
RUIFIER官网：英国奢侈高级珠宝品牌
2020/06/12 全球购物
中英文自我评价语句
2013/12/20 职场文书
工作表扬信
2015/01/17 职场文书
经费申请报告范文
2015/05/18 职场文书
教你用python实现12306余票查询
2021/06/30 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript