首页
所有分类
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 中对象的继承〔转贴〕
Jan 22 Javascript
input的focus方法使用
Mar 13 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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
OutputStream(1) Storage(1) Set接口(1) Vue(10) vuex(1) click(1) InputStream(1) 本地化存储(1) persistedstate(1) HashSet集合(1)
You might like
jQuery 源码分析笔记
2011/05/25 PHP
微信支付开发教程（一）微信支付URL配置
2014/05/28 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示：焕新世界，如你所期
2020/05/29 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python中常见的数据类型小结
2015/08/29 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python短信轰炸的代码
2020/03/25 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
聊聊python中的循环遍历
2020/09/07 Python
预订全球最佳旅行体验：Viator
2018/03/30 全球购物
Godiva巧克力英国官网：比利时歌帝梵巧克力
2018/08/28 全球购物
JSF面试题：如何管量web层中的Bean，用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
会议活动邀请函
2014/01/27 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
银行业务授权委托书
2014/10/10 职场文书
前台文员岗位职责
2015/02/04 职场文书
文体活动总结
2015/02/04 职场文书
初婚未育证明样本
2015/06/18 职场文书
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS