首页
所有分类
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 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 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
Keras(3) variable_scope(1) blinker(1) name_scope (1) turtle(1) 信号库(1) 神经网络(7) 字符集(1) 三子棋(2) data(4)
You might like
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jquery刷新页面的实现代码（局部及全页面刷新）
2011/07/11 Javascript
jquery处理json对象
2014/11/03 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
javascript实现简易计算器
2017/02/01 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Python正则捕获操作示例
2017/08/19 Python
python文件读写代码实例
2019/10/21 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
台湾SHOPRO购物行家：亚洲首创影视．3C．家电．优质购物平台
2018/05/07 全球购物
女士和男士时尚鞋在线购物：Shoespie
2019/02/28 全球购物
英文推荐信格式范文
2014/05/09 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
租车协议书
2015/01/27 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Springboot-cli 开发脚手架，权限认证，附demo演示
2022/04/28 Java/Android