通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

时间：2022-05-24 12:30:18

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;

 }

相关文章