【ztree系列】节点拖拽

       这个功能看起来很高大上，其实吧，实际做的时候才知道so easy。

一、简述

        节点拖拽，就是在操作tree的时候，可以把节点放在tree的任意位置上。当拖动一个节点的时候，可把它的子节点也一并拖拽到目标节点下，对于要拖拽的节点、目标节点、以及拖拽前后的操作，我们也都可自行控制，听起来是不是方便到家啦，哈哈，这个功能就是这样，看起来炫，做起来还超简单！

二、节点拖拽

       1. 需要在定义tree的时候添加一些属性（前几篇博客中已经介绍过，追加上去就可以了）

    //编辑功能
    edit: {
        drag: {
            autoExpandTrigger: true,
            prev: dropPrev,
            inner: dropInner,
            next: dropNext
        },
    }
<pre name="code" class="javascript">    callback: {
        beforeDrag: beforeDrag,
        beforeDrop:beforeDrop,
        beforeDragOpen: beforeDragOpen,
        onDrag: onDrag,
        onDrop: onDrop
    }

拖拽属性说明：

    autoExpandTrigger: true, //拖拽时父节点自动展开是否触发onExpand 事件回调函数。

    prev: dropPrev, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。

    inner: dropInner, //拖拽到目标节点时，设置是否允许成为目标节点的子节点。

    next: dropNext //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。

回调函数说明：

    beforeDrag: beforeDrag, //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作

    beforeDrop:beforeDrop, //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作

    beforeDragOpen: beforeDragOpen, //用于捕获拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作

    onDrag: onDrag, //用于捕获节点被拖拽的事件回调函数

    onDrop: onDrop, //用于捕获节点拖拽操作结束的事件回调函数

    onExpand: onExpand, //用于捕获节点被展开的事件回调函数

       2. 上边并不是所有的方法都要用到的，我在项目中只用了几个需要用的，所以定义的时候不用都定义出来

       beforeDrag方法：在拖拽之前，先判断该节点能否被拖拽，能拖拽的才会继续后续操作，否则直接退出拖拽功能

function beforeDrag(treeId, treeNodes) {
    className = (className === "dark" ? "":"dark");
    for (var i=0,l=treeNodes.length; i<l; i++) {
        if (treeNodes[i].drag === false) {
            curDragNodes = null;
            return false;
        } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
            curDragNodes = null;
            return false;
        }
    }
    curDragNodes = treeNodes;
    return true;
}

       beforeDrop方法：在添加到目标节点下之前，判断目标节点是否存在（这里限制了对于根节点的添加），若存在则判断目标节点下是否已存在相同的节点

function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    //如果有提交到后台的操作，则会先执行if…else…再执行post等提交操作
    if(targetNode) {
        if(targetNode.children != undefined){
            //console.log(targetNode.children[0].name)
            //var nodes = targetNode.children;
            var name = treeNodes[0].name;
            for (i = 0; i < targetNode.children.length; i++) {
                if(targetNode.children[i].name == name){
                    alert("Error: This name already exists.");
                    return false;
                }
            }
        }
        return true;
    }
    return false;
}

       onDrop方法：在加入到目标节点时，一并将信息提交给后台进行更新，额。。。post方法不规范，大家自己改吧

    function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
        className = (className === "dark" ? "":"dark");
        //拖拽成功时，修改被拖拽节点的pid
        if(treeNodes && targetNode){
            $.post('./index.php?r=selenium/updatePId&id='+treeNodes[0].id+"&pid="+targetNode.id)
            rightContent(treeNodes[0]); //调用右半部分
        }
    }

小结：

       对于tree的操作还可以添加滚动监听、节点复制等功能，可以说是换汤不换药。所以如果感觉这款工具不错，那就多动动手来参与一下吧