[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop 시 해당 폴더에 동일 이름이 존재할 경우 예외처리하기

[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop

---

이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 4 context menu

드래그앤드롭(DragNDrop)기능을 사용하기 위해서는 dnd5모듈을 추가해야한다.

 

dnd5 모듈을 이용해서 기본적인 기능은 가능하지만,
드래그앤 드롭시 목적지 폴더에 내가 옮기려는 파일과 이름이 같은 파일이 존재할 경우 예외처리를 추가하고자 한다.

 

 

dnd5의 이벤트는 다음과 같다.

• dragStart : 드래그 이벤트 시작시 (마우스 누름)

• dragDrag : 드래그 이벤트 중

• dragEnd : 드래그 이벤트 끝남

• dragEnter : 드래그 이벤트 중 "over", "before, "after"

• dragOver : 드래그 이벤트 중 'copy', 'move', 'link'

• dragExpand : 드래그 이벤트 중 부모 폴더 선택 시 폴더가 열릴 때

• dragLeave : 드래그 이벤트 떠남

• dragDrop : 드롭할 때 (마우스 땜)

(이벤트 발생 순서 : dragStart -> dragDrag - (dragEnter/dragOver/dragExpand/dragLeave) -> dragDrop -> dragEnd)

 

 

 

즉, DragDrop이벤트 때, 목적지 폴더에 동일이름의 파일이 존재하는지 체크하면 된다.

const fancytree = require('jquery.fancytree');
require('jquery.fancytree/dist/modules/jquery.fancytree.dnd5');

// TREE
const FancyTree = fancytree.createTree('#tree', {
  extensions: ["dnd5"],
  // ...생략...
  dnd5: {
    preventSameParent: false, // Prevent dropping nodes under the same direct parent
    autoExpandMS: 1000,
    refreshPositions: true,
    multiSource: true, // drag all selected nodes (plus current node)
    dragDrop: function (node, data) {
      let selNodes = data.otherNodeList;  // 선택한 노드 리스트
      let check = []  // 동일 이름 존재할 경우 해당 파일 이름 넣을 리스트

      $.each(selNodes, function (i, o) {
        // 동일 이름 존재하는지 검사
        var siblings = (data.hitMode === "over") ? node.children : node.getParent().children
        if (siblings) {
          for (let si of siblings) {
            if (si.parent !== o.parent) { // 부모가 다르고
              if (si.title === o.title && si.folder === o.folder) { // 타입과 이름이 같은 경우
                check.push(` * [${(o.folder) ? "폴더" : "파일"}] ${o.title} `)
              }
            }
          }
        }
      });

      // 동일한 파일명이 존재하는 경우 에러 메세지 표시 후 종료
      if (check.length > 0) {  
        let message = `동일한 이름이 존재합니다.\n`
        for (let item of check) {
          message += `${item}\n`
        }
        alert(message)
      } else {
        // 노드 이동
        $.each(selNodes, function (i, o) {
          o.moveTo(node, data.hitMode)
        })

        // 선택했던 노드 모두 활성화(active, focus, selected) 제거
        $("#tree").fancytree("getTree").visit(function (node) {
          node.setSelected(false);
          node.setFocus(false);
          node.setActive(false);
        });
      }
    }
  }
})

 

 

추가로, 만약 동일 이름의 파일이 존재하는 경우 해당 파일 이름을 변경한 후 이동하고자 한다면

아래와 같이 24번째 줄에서 o.setTitle로 이름을 변경한 후 o.moveTo해주면 된다.

dragDrop: function (node, data) {
      $.each(sourceNodes, function (i, o) {
        // 동일 이름 검사
        var siblings = (data.hitMode === "over") ? node.children : node.getParent().children
        if (siblings) {
          for (let si of siblings) {
            if (si.parent !== o.parent) { // 부모가 다르고
              if (si.title === o.title && si.folder === o.folder) { 
                // 타입과 이름이 같은 경우 .new 추가
                o.setTitle(o.title + ".new")
              }
            }
          }
        }
        o.moveTo(node, data.hitMode)
      });
}