[vue.js] element-ui el-tree 드래그 앤 드랍 특정 조건으로 구현하기

el-tree

<el-tree
  :data="data"
  node-key="id"
  default-expand-all
  :expand-on-click-node="true"
  :render-content="renderContent"
  draggable
  :allow-drop="allowDrop"
              >
</el-tree>

:allow-drop 속성을 활용해서 트리를 노드 밖으로 혹은 안으로, 옆으로
드래그 앤 드랍으로 구현할 수 있다.
이 때, Root 노드 밖으로는 이동하지 못하도록 만들기 위해 아래와 같이 함수를 구현했다.

if else문 테스팅 (초기버전)

allowDrop(draggingNode, dropNode, type){
        /* root 밖으로는 못나가게 하고 그 안에서는 드래그 앤 드랍 가능하도록 구현 */
        if (draggingNode.level === dropNode.level) {
          //같은 레벨에서 이동하기
          if (draggingNode.parent.id === dropNode.parent.id) {
            // 같은 레벨에서 > 같은 부모 아래에서 이동하기
                         // Drag up || Drag down
            return type === "prev" || type === "next";
          } else {
            // 같은 레벨에서 > 다른 부모 아래로 이동하기 
            return type === "prev" || type === "next";
          }
        } else if(draggingNode.level < dropNode.level) {
          //뎁스가 더 깊은 레벨로 이동하기
          if(draggingNode.parent.id !== dropNode.parent.id) {
            // 더 깊은레벨로 > 다른 부모 아래로 이동하기
            return type === "prev" || type === "next";
          } else {
            // 더 깊은레벨로 > 같은 부모 아래에서 이동하기 (not working : 무슨 이유인지 4뎁스는 허용이 안됨)
            return type === "prev" || type === "next";
          }
        } else {
          //뎁스가 더 얕은 레벨로 이동하기
          if(draggingNode.parent.id !== dropNode.parent.id) {
            if(draggingNode.parent.data.label === "Root"){
              //더 얕은 레벨로 > Root 위로 이동하기
              return false
            }
            // 더 얕은레벨로 > 다른 부모 아래로 이동하기
            return type === "prev" || type === "next";
          }else {
            // 더 얕은레벨로 > 같은 부모 아래에서 이동하기 (not working : 같은 부모 아래에서 얕은레벨로 이동하는게 불가)
            return type === "prev" || type === "next";
          }

        }
      }
  }

위의 코드 삼항연산자로 줄이기 (코드 개선 버전)

      allowDrop(draggingNode, dropNode, type){
        /* root 밖으로는 못나가게 하고 그 안에서는 드래그 앤 드랍 가능하도록 구현 */
                                  // Drag up || Drag down
        const typeRule = type === "prev" || type === "next"
        return (draggingNode.level > dropNode.level && 
        draggingNode.parent.data.label === "Root") ? !typeRule : typeRule;
      }

코드펜 링크

참고사이트 : https://www.programmersought.com/article/29574347920/