首页
所有分类
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实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
循环(3) 移动开发(2) android studio(3) IDEA(2) 查找算法(1) OpenLayer(1) 嵌套(1) 安卓(1) 二维数组(2) 分块(1)
You might like
php中的时间处理
2006/10/09 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Python logging设置和logger解析
2019/08/28 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Haglöfs瑞典官方网站：haglofs火柴棍，欧洲顶级户外品牌
2018/10/18 全球购物
卡骆驰德国官方网站：Crocs德国
2019/03/29 全球购物
应届生高等护理求职信
2013/10/12 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
中班开学寄语
2014/04/04 职场文书
2014年加油站工作总结
2014/12/04 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
python如何将mat文件转为png
2022/07/15 Python