首页
所有分类
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 相关文章推荐
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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) 酶(1) 美国航天局(1) 天问一号(1) 火星(2) NASA(1) 塑料(1) 数据(1) 大脑(1) 富碳陨石(1)
You might like
初学者入门：细述PHP4的核心Zend
2006/09/05 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用，基于对象的跨表查询】
2019/12/12 Python
行政文员实习自我鉴定范文
2014/09/14 职场文书
2015新年寄语（一句话）
2014/12/08 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
管理人员岗位职责
2015/02/14 职场文书
幽默口才训练经典句子（48句）
2019/08/19 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript