首页
所有分类
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制作搜狐快站页面效果示例分享
Feb 21 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
ES6字符串模板，剩余参数，默认参数功能与用法示例
Apr 06 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
javaScript代码飘红报错看不懂？读完这篇文章再试试
Aug 19 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 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
Spring JPA(1) Spring Bean(1) EditText(1) Django(9) openEuler(1) TextInputLayout(1) REST(1) Switch(1) 远程桌面(2) cmd(1)
You might like
第十四节--命名空间
2006/11/16 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python3访问sina首页中文的处理方法
2014/02/24 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
遗传算法python版
2018/03/19 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
Becextech新西兰：数码单反相机和手机在线商店
2018/04/27 全球购物
New Balance德国官方网站：购买鞋子和服装
2019/08/31 全球购物
Chemist Warehouse中文网：澳洲连锁大药房
2021/02/05 全球购物
出生公证书样本
2014/04/04 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android