用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>
Javascript 相关文章推荐
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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
You might like
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JS常见算法详解
2017/02/28 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python烟花效果的代码实例
2020/02/25 Python
python利用opencv保存、播放视频
2020/11/02 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
女大学生个人求职信
2013/12/09 职场文书
经典婚礼主持词
2014/03/13 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
公务员处分决定书
2015/06/25 职场文书
村官2015年度工作总结
2015/10/14 职场文书