재귀 구성요소 및 재귀 중첩의 Vue 끌어서 놓기

재귀 구성요소 및 재귀 중첩의 Vue 끌어서 놓기

나는 Vue와 함께 재귀 트리 구성요소를 만들기 위해 일하고 있다. 현재 나는 체크박스에 대한 지원을 추가하고 노드를 확장하고 있지만, 재귀 구성요소에 드래그 앤 드롭을 구축하는 데 약간의 문제가 있다.

이 샘플로 드래그 앤 드롭을 구현할 방법이 있는가?

코드 및 상자 링크

끌리는 노드를 얻을 수 있지만 드롭다운에서 대상 노드를 얻을 수 없는 경우?끌기 중지 시 끌린 노드만 표시됨 수신기를 다른 위치에 추가해야 하는가?

여기선 노드만 끌리는데?

 handleDragEnd() {
          this.$el.classList.remove('cmp-drag-node');
      },

참고: VueDraggable Im이 간단한 jsfiddle이나 문제에 대한 몇 가지 설명을 찾는 솔루션을 원하지 않는다. 노드 재주문뿐만 아니라 노드에도 들어가야 하기 때문에 Vue draggable이 작동하지 않음

그래서 다음 코데펜은 나에게 잘 어울린다.중첩된 구성요소로 드래그 앤 드롭 처리 가능하지만 일부 코드를 변경해야 함.

나는 사용해 왔다.vuedraggable. 주요 구성 요소는Tree.vue그리고 노드는 다음 위치에 있다.Treenode.vue가끔은 노드를 복제하는 일인데 내가 뭔가 놓친 게 있을지도 모르지만 다른 건 다 잘 되고 있어.

코드펜 - https://codesandbox.io/s/lingering-surf-ckv3y

참조URL: https://stackoverflow.com/questions/60457930/vue-drag-drop-in-recursive-component-recursive-nesting