首页
所有分类
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 相关文章推荐
一个不错的应用,用于提交获取文章内容，不推荐用
Mar 03 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery选择器源码解读（一）：Sizzle方法
Mar 31 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
开幕词(63) 通知(159) 工作总结(1972) 观后感(479) 汇报材料(247) 导游词(322) 慰问信(53) 实用文书(952) 计划(88) 闭幕词(9)
You might like
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
一个js写的日历（代码部分网摘）
2009/09/20 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
python文件写入实例分析
2015/04/08 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python切片工具pillow用法示例
2018/03/30 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
用python实现名片管理系统
2020/06/18 Python
韩国女装NO.1网店：STYLENANDA
2016/09/16 全球购物
几个Shell Script面试题
2014/04/18 面试题
迟到检讨书大全
2014/01/25 职场文书
工程招投标邀请书
2014/01/26 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
考试作弊检讨书怎么写？
2014/12/21 职场文书
检讨书怎么写
2015/05/07 职场文书
一篇合格的广告文案，其主要目的是什么?
2019/07/12 职场文书
php随机生成验证码，php随机生成数字，php随机生成数字加字母！
2021/04/01 PHP
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript