首页
所有分类
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 获取json数据实现代码
Apr 27 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
AJAX检测用户名是否存在的方法
Mar 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
openEuler(1) cmd(1) EditText(1) Switch(1) 远程桌面(2) Spring JPA(1) REST(1) exists(2) 慢日志(1) Spring Bean(1)
You might like
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php 正则表达式小结
2009/08/31 PHP
php生成短网址示例
2014/05/05 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
JavaScript进阶（三）闭包原理与用法详解
2020/05/09 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python如何将多个PDF进行合并
2019/08/13 Python
python制作抽奖程序代码详解
2021/01/15 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
车辆工程专业求职信
2014/06/14 职场文书
异地年检委托书范本
2014/09/24 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
东京审判观后感
2015/06/01 职场文书
贷款收入证明范本
2015/06/12 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL