Drag

[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 4 context menu 드래그앤드롭(DragNDrop)기능을 사용하기 위해서는 dnd5모듈을 추가해야한다. dnd5 모듈을 이용해서 기본적인 기능은 가능하지만, 드래그앤 드롭시 목적지 폴더에 내가 옮기려는 파일과 이름이 같은 파일이 존재할 경우 예외처리를 추가하고자 한다. dnd5의 이벤트는 다음과 같다. dragStart : 드래그 이벤트 시작시 (마우스 누름) dragDrag : 드래그 이벤트 중 dragEnd : 드래그 이벤트 끝남 dragEnter : 드래그 이벤트 중 "over", "before, "after"..

[JavaScript] TreeView 사용하기 (fancytree) 사용하고자 하는 Tree 조건은 다음과 같았다. * Tree(트리) 사용 조건 방향키로 노드간 이동 가능해야 한다. shift, ctrl이용해서 다중 선택이 가능해야 한다. 폴더간 드래그 앤 드롭으로 이동이 가능해야 한다. 루트 노드는 이동 불가해야 한다. 자식노드는 자식노드 하위로 이동 불가해야 한다. 위 조건을 모두 만족하는 트리를 찾기 힘들었다. 처음에는 가장 많이 쓰는 라이브러리를 찾아 구현되어 있지 않는 조건들은 stackoverflow 나 git 등에서 찾아 기능을 추가하려고 했으나, 쉽지 않았다. 완성된 프로젝트에 트리 부분만 떼다 붙이려니 여러가지 오류가 발생했었다. jstree 가장 많이 사용함. 위 조건 모두 구현 가..