首页
所有分类
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实现的搜索时自动提示功能
Dec 26 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
EXT中单击button按钮grid添加一行（光标位置可设置)的实例代码
Jun 02 Javascript
JavaScript简单实现弹出拖拽窗口（一）
Jun 17 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
js制作提示框插件
Dec 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
动静分离(1) http(6) 负载均衡(6) Windows server 2016(6) Telnet(1) https(7) 防盗链(1) 生成缩略图(1) 反向代理(2) reload(1)
You might like
PHP文件下载类
2006/12/06 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
yii操作cookie实例简介
2014/07/09 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python框架flask表单实现详解
2019/11/04 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Helly Hansen工作服美国官方网上商店：为最恶劣的环境
2019/09/04 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
办公室主任岗位职责
2013/11/08 职场文书
社区义诊活动总结
2014/04/30 职场文书
优秀教师个人材料
2014/12/15 职场文书
公司会议开幕词
2015/01/29 职场文书
情感电台广播稿
2015/08/18 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python办公自动化之Excel（中）
2021/05/24 Python