通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置
zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述.
下面我将介绍如何实现使用该插件生成HTML元素Dom树,并对其进行多样操作.
先贴上一个简单的HTML页面(直接拿的ztree的用的,画面简单实用,里面的文字内容不用在意)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-2.2.4.min.js"></script>
<link href="http://localhost:83/Library/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="http://localhost:83/Library/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
<script src="../Scripts/tree.js"></script>
<style type="text/css">
div#rMenu {
position: absolute;
visibility: hidden;
top: 0;
background-color: #555;
text-align: left;
padding: 2px;
} div#rMenu ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
} .ztree {
margin-top: 10px;
border: 1px solid #617775;
background: #f0f6e4;
width: 220px;
height: 360px;
overflow-y: scroll;
overflow-x: auto;
} div#rMenu ul li {
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #DFDFDF;
}
</style>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left" id="tree">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<div class="example">
<ul myid="1">
<li myid="2">
<h2 myid="3">实现方法说明</h2>
<ul myid="4">
<li myid="5">对于这种只有一个根节点，且不显示 +/- 开关的需求，需要利用 css、setting 配合使用</li>
<li myid="6">zTree v3.x 可以针对指定的 level，进行样式设定，请查看本页面源码，查看 css 设置</li>
<li myid="7">设置 setting.view.dblClickExpand 指向 Function，可以只针对根节点关闭双击展开的操作</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2JS文件(仅生成dom树),需要用到递归
var zNodes = [], zTree, rMenu, $example;
function loopnodes(fathernode) {
var ret = [];
var children = $(fathernode).children();
children.each(function (i, em) {
var node = {
myid: $(em).attr('myid'),
name: $(em)[0].tagName + '|' + $(em).attr("myid"),
children: []
};
if ($(em).children().length > 0) {
node.children = loopnodes(em);
}
ret.push(node);
});
return ret;
}
$(document).ready(function () {
$example = $(".example");
zNodes = loopnodes($example);
zTree = treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
var setting = {
edit: {
showRemoveBtn: false,
showRenameBtn: false,
}
};
这样就可以把指定的区域的元素遍历到dom树上,再根据官方提供的Apl，可以对其进行一系列的操作.
例如(举个简单例子,对应API很容易实现),点击dom树上的节点,对应的页面元素发生变化
var setting = {
edit: {
showRemoveBtn: false,
showRenameBtn: false,
} ,
callback: {
onClick: zTreeOnClick,
}
};
function zTreeOnClick(event, treeId, treeNode) {
var myid = treeNode.myid;
$example.find('[myid="' + myid + '"]').css('color', 'red');
};
那么如何进行拖拽实现页面元素与dom树节点的变化了,首先,我们要明白ztree与位置变化相关的参数
先贴一个简单的拖拽代码
var setting = {
edit: {
drag: {
prev: true,
inner: true,
next: true,
isMove: true,
isCopy: true
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
function beforeDrag(treeId, treeNodes) {
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return true;
}
我们需要需要关注的是beforeDrop,在拖拽落下的时候会传入的:
treeNodes:拖动的节点
targetNode:目标节点
moveType:拖动节点与目标节点的关系
我们确定拖动的节点所拖到的位置,就需要依靠moveType,它可能的值是
prev: 拖动节点在目标节点之前
inner: 拖动节点在目标节点之内
next: 拖动节点在目标节点之后
关于目标节点,可以参考下面内容:
当你要把 C 拖拽到 A 和 B 之间 的时候， 如果仅仅要鼠标移动到 A和B 之间的空间内操作起来实属不易， 所以必然是在 B 的偏上位置 或 A 的偏下位置 即可认为是 A、B之间， 并且这里面也有一些细微的区别：
在 A 偏下的时候， 你得到的 drop 的参数 target 是 A，moveType 是 next
在 B 偏下的时候， 你的道德 drop 的参数 target 是 B，moveType 是 prev
有了这层关系,很容易就可以完成拖拽dom树,页面元素跟随变化
var setting = {
edit: {
drag: {
prev: true,
inner: true,
next: true,
isMove: true,
isCopy: true
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
function dropdrag(selectmyid, targetmyid, moveType) {
var currentelem = $example.find('[myid=' + selectmyid + ']');
var parentelem = $example.find('[myid=' + targetmyid + ']');
var content = currentelem.prop("outerHTML")
if (moveType == 'inner') {
parentelem.append(content);
currentelem.remove();
}
else if (moveType == "prev") {
parentelem.before(currentelem)
}
else {
parentelem.after(currentelem)
}
}
function beforeDrag(treeId, treeNodes) {
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
var selectmyid = treeNodes[0].myid,
targetmyid = targetNode.myid;
dropdrag(selectmyid, targetmyid, moveType);
return true;
}
通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置的更多相关文章
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
- 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- 拖拽一个元素如此简单，mouse、drag、touch三兄弟的用处
最近需要做一个投票活动,上传图片时需要拖拽.缩放来裁剪图片,vue的组件不少,不过自己动手才能丰衣足食,一味使用别人的组件实在难以进步,所以自己研究一番. 一.mouse.drag.touch傻傻分不 ...
- HTML5:一个拖拽网页元素的例子
关键字:HTML5, Drag&Drop, JavaScript, CSS 运行环境:Chrome <!DOCTYPE html> <html> <head> ...
随机推荐
- Android 自定义spinner下拉框实现
一:前言本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去网 ...
- C#异步方法的使用
from:http://www.myext.cn/csharp/a_6765.html 也许业内很多高不成低不就的程序员都会对一些知识点会有些迷惑,原因是平常工作用的少,所以也就决定了你对这个事物的了 ...
- AOP programming paradiag
AOP https://en.wikipedia.org/wiki/Aspect-oriented_programming Typically, an aspect is scattered or t ...
- 通过Chrome浏览器检测和优化页面
1.访问(http://www.cnblogs.com/viaiu/) 2.点击F12 前两步就在扯淡 3.点击Audits标签,进入测试界面 4.点击按钮开始检测 5.如下图可以进行页面加载资源的详 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- 屌丝程序员的梦想 (六) 我也写个开源CMS
离开上家公司之后,我没急着找下家公司,一直以来都是为公司做各个细小的功能却没有属于自己的完整的项目 思来想去,我准备用自己熟悉的thinkphp 和 extjs写一个开源的cms,从用户系统,文章系统 ...
- 纯css的防止图片撑破页面的代码(图片自动缩放)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- paper 129 : 比较好的开源人脸识别软件
1.face.com 以色列公司,某年六月时被Facebook收购,同时暂停了API服务,之前测试过他们的服务,基本上是了解到的应用中做得最牛的了. 2.orbe Orbeus由麻省理工学院和波士顿大 ...
- 前端 时间个性化 插件 jquery.timeago.js
关键词 : 时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 MM-dd hh:mm 或者 yyyy-MM-dd 前端: <span class="time" ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数014,tuple，元组
<zw版·Halcon-delphi系列原创教程> Halcon分类函数014,tuple,元组 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...