首页
所有分类
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 FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
Openlayers绘制聚合标注
Sep 28 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) Spring JPA(1) EditText(1) REST(1) Switch(1) cmd(1) 远程桌面(2) Spring Bean(1) openEuler(1) exists(2)
You might like
PHP中echo和print的区别
2014/08/28 PHP
php封装的smarty类完整实例
2016/10/19 PHP
js获取网页高度(详细整理)
2012/12/28 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
vue路由懒加载的实现方法
2018/03/12 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python matlibplot绘制3D图形
2018/07/02 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python可迭代对象去重实例
2020/05/15 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
阿迪达斯比利时官方商城：adidas比利时
2016/10/10 全球购物
瑰珀翠美国官网：Crabtree & Evelyn美国
2016/11/29 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
英文自荐信
2013/12/15 职场文书
诉前财产保全担保书
2014/05/20 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年大学生工作总结
2014/11/20 职场文书
全陪导游词
2015/02/04 职场文书
培训简讯范文
2015/07/20 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python