[ExtJs] 拖动 变更元素位置

实现一个，左边是导航信息，右侧是展示区域，然后拖动 导航节点重新定位后，右侧也随之j进行布局变化，如下图：

核心方法：

ExtJS容器对象.move(fromIdx,toIdx)

因为涉及的知识点较多，后期有空补上，先贴上核心思想：

生成节点

右侧的容器元素，首先就是根据左侧的树形展开结构，依次渲染的，也就是将多维的树，看成一个导航。

将多维的数组，平铺为一个一维数组

根据这个数组，进行依次加载各类控件。

移动的节点 

寻找移动的位置后，他的前一个节点（注意不是同级前一个 而是 树形展开后前一个）这是为了定移动目标，知道移动到谁的屁股后面

  /*
        寻找上一个树形文件节点
    */
    findPreNode(node) {
        const me = this;
        if(!node) return null;
        let preNode = node.previousSibling;
        if(preNode) {
            if(preNode.isLeaf() && preNode.get('LineType')!='L') //文件节点
            {
                return preNode;
            }else { //文件夹节点
                if(preNode.hasChildNodes()) {
                  return  me.findLastNode(preNode.lastChild);
                } else return me.findPreNode(preNode);
            }
        }else {
            if(node.get('ParentID')=='Root') {
                return null;
            }
            return me.findPreNode(node.parentNode);//必须加return 以用于层层接收值
            //否则就得用 me.findPreNode(node.parentNode, targetNode) 用targetNode 做传递参数
        }
    },

 再找到移动节点的子孩子，之所以找第一个子孩子，就是为了要他的起始位置，在一维数组里，变更了元素位置，后面的元素下标也都跟随变化了，所以我们只要找第一个要移动的节点的位置即可。

//寻找第一个非文件夹节点
    findFirstNode(node) {
        const me = this;
        if(node.isLeaf()) {
            if(node.get('LineType')!='L')//非文件夹节点
            return node;
            else return null;
        }
        else if(node.hasChildNodes()) {
            node.eachChild(function (child) {
              return me.findFirstNode(child);
            });
        }
    }

找齐了上面的信息，就可以得到fromIdx,和toIdx了 

     //节点移动
    nodeMove(node) {
        const me = this,
        content = me.down('#content');//访问右侧展示容器
        let prenode = me.findPreNode(node);//当前位置现在的前一个元素
        let toIdx = 0, //目标位置
        firstChild = me.findFirstNode(node),
        fromIdx = content.indexOf(me.down(`#${firstChild.getId()}`)); //起始位置
        if(prenode) {
            toIdx = content.indexOf(me.down(`#${prenode.getId()}`));//上面元素的位置
            if(toIdx < fromIdx) toIdx = toIdx + 1;//向上挪到位置加1
        }
        me.moveItem(content, fromIdx, toIdx, node);
    },

然后再借助递归，进行逐级依序地进行移动

 moveItem(container, fromIdx, toIdx, node) {
        const me = this;
        if(node.isLeaf()) {
            if(node.get('LineType') !='L')//非文件夹节点 执行 移动
            container.move(fromIdx, toIdx);
        }else if(node.hasChildNodes()) {
            node.eachChild(function (child) {
                return me.moveItem(container, fromIdx, toIdx, child);
            });
        }
    },