首页
所有分类
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 学习笔记（十六） js事件
Feb 01 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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) 字符画(1) Vite(1) cudn(1) hook(1) cudnn(1) RTX 3050 ti(1) callback(1) dict(1) 热力图(1)
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
实现音乐播放器的代码（html5+css3+jquery）
2015/08/04 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python机器学习理论与实战（四）逻辑回归
2018/01/19 Python
python调试神器PySnooper的使用
2019/07/03 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
爱尔兰电子产品购物网站：Komplett.ie
2018/04/04 全球购物
莫斯科隐形眼镜网上商店：Linzi
2019/07/22 全球购物
豪华床上用品 ：Jennifer Adams
2019/09/15 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
致百米运动员广播稿
2014/01/29 职场文书
公司经理聘任书
2014/03/29 职场文书
啦啦队口号大全
2014/06/16 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android