ztree插件中的拖拽使用

很多时候会用到树形结构来展示层级数据，有时候我们会用到拖拽效果该改变树结构中的层级数据

首先设置配置项，必须配置edit：{enable:true}即开启编辑，然后只需要拖拽时需要禁用修改删除按钮，然后根据需要配置drag配置项，比如拖拽时是复制该节点到目标节点(isCopy)，还是将该节点移动到目标节点（isMove）。同级是否可以变换位置（prev,next）。如果允许将节点拖放成为目标节点子节点（inner）。

下面的配置是仅允许将拖放节点放置到目标节点里面，同级不允许修改位置。

var setting = {
    check: {
        enable: false //不需要单选框
    },
    view: {
		dblClickExpand: false // 双击不允许展开节点
	},
    data: {
        simpleData: {
            enable: true   //数据结构定义为simpleData
        }
    },
    edit: {
    	enable:true,   //拖拽必须开启edit
    	drag: {
			isCopy: false,//拖拽时, 设置是否允许复制节点
			isMove: true,//拖拽时, 设置是否允许移动节点
			prev: false, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作
			next: false,//拖拽到目标节点时，设置是否允许移动到目标节点后面的操作
			inner: true,//拖拽到目标节点时，设置是否允许成为目标节点的子节点
		},
	showRenameBtn: false,//隐藏自带的修改按钮
	showRemoveBtn: false,//隐藏自带的删除按钮
    },
    callback: {
        onClick: zTreeOnclick,//单击节点
        onDblClick: zTreeOnDblClick,//双击节点
        beforeDrag: zTreeBeforeDrag,//拖拽前
        beforeDrop: zTreeBeforeDrop,//放置前
        onDrop: zTreeOnDrop,//放置
    }
};

关于用到的回调函数一般就是：beforeDrag，beforeDrop，onDrop，ztree关于拖拽的回调很丰富，但是我们一般情况下这三个回调足够了，下面也仅介绍这三个回调函数。

beforeDrag：用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作。如果返回 false，将无法触发 onDragMove 和 onDrag 事件回调函数。

例如：一级节点不允许拖放

function zTreeBeforeDrag(treeId, treeNodes) {
	if(treeNodes[0].pId === '0'){
		//alert('一级节点不允许拖放')
		return false;
	}
};

beforeDrop：用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作，如未拖拽到有效位置，则不触发此回调函数，直接将节点恢复原位置

例如 禁止将节点拖拽成为根节点

function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
    //禁止将节点拖拽成为根节点
    return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));
};


function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
	
    //例如根据你节点的属性确定节点拖拽的规则，比如不能移动二级节点
    //比如三级节点不能放到三级节点下面，仅能放到一级或者二级
    if(treeNodes[0].treeType==='1' || targetNode.treeType==='0' ){
	   return false;
    }
    
};

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

重点来了，这个回调可以做很多很多事情，我们前面的几个回调函数都是在定义拖拽的条件规则，而这里就是拖拽完成所需要做的事情。例如你可以根据ztree的节点生成一个带数据的节点放置到某个div盒子中。如果是ztree中的节点拖放，你还需要将拖放结果发送给后端保存修改结果。

function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
    //如果是树之间的拖放发送拖拽结果给后端
    if(targetNode){
        $.ajax()....
    }

    //如果是把节点拖放到某个区域生成一个元素
    if(event.target.className === 'zone'){
        let item = document.createElement('div');
        item.className = 'item';
        item.style.left = event.pageX + 'px';
        item.style.top = event.pageY + 'px';
        item.innerHTML = treeNodes[0].name;
        
        event.target.appendChild(item);

        //然后向后端保存数据
        $.ajax....
    }
};

上面回调函数参数说明（相同参数名值的意义是一样的）：

event：标准的 js event 对象

treeId：目标节点 targetNode 所在 zTree 的treeId，即初始化ztree的id

treeNodes：被拖拽的节点 JSON 数据集合，可能是多个节点，是一个数组，数组项是每个节点的对象信息

targetNode：如果是在树中拖放是成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。如果不是在树中值为null

moveType：指定移动到目标节点的相对位置，"inner"：成为子节点，"prev"：成为同级前一个节点，"next"：成为同级后一个节点。如果 moveType = null，表明拖拽无效