【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的操作還可以添加滾動監聽、節點複製等功能，可以說是換湯不換藥。所以如果感覺這款工具不錯，那就多動動手來參與一下吧