首页
所有分类
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 相关文章推荐
找到一点可怜的关于dojo资料，谢谢作者！
Dec 06 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
Ant Design的Table组件去除
Oct 24 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
ATS-909X(1) Grundig(1) S500(1) BCL3000(2) ICF-SW07(1) H-501(1) PL990(2) SANGEAN(1) S400(1) S700(1)
You might like
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha）
2007/04/27 Javascript
基于jquery的大众点评，分类导航实现代码
2011/08/23 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
判断横屏竖屏（三种）
2017/02/13 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python  Django 母版和继承解析
2019/08/09 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
加拿大消费电子和手机购物网站：The Source
2017/01/28 全球购物
廉洁家庭事迹材料
2014/05/15 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
运输公司工作总结
2015/08/11 职场文书