首页
所有分类
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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 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
C/C++(1) Anaconda(2) 间隙锁(2) 历史记录(1) 经纬度(1) MVCC(4) innoDB(3) html标准库(1) ctypes(1) dll(1)
You might like
11个PHP 分页脚本推荐
2011/08/15 PHP
php读取txt文件组成SQL并插入数据库的代码（原创自Zjmainstay）
2012/07/31 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python实现文字版扫雷
2020/04/24 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
德国婴儿推车和儿童安全座椅商店：BABYSHOP
2016/09/01 全球购物
物业门卫岗位职责
2013/12/28 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技