vue 드래그 가능 한 트 리 구조 도 구현

3629 단어 vue끌 수 있다구조 도
최근 vue 로 드래그 가능 한 트 리 구조 도 를 만 들 었 습 니 다.
Vue 재 귀적 구성 요소
구 조 는 Vue 의 재 귀 구성 요 소 를 통 해 이 루어 집 니 다.

레이아웃 은 flex 를 사용 하고 구조 선 은 CSS 의사 류 에 의 해 이 루어 집 니 다.
주의해 야 할 것 은 가운데 레이아웃 입 니 다.X 축 요소 가 너무 많 으 면 하위 요소 의 너비 가 보 기 를 초과 합 니 다.요소 가 가운데 에 있 으 면 스크롤 바 가 있 지만 오른쪽 내용 만 도착 할 수 있 습 니 다.왼쪽 내용 은 접근 할 수 없습니다.부모 요 소 를 inline-flex 로 설정 하고 너 비 는 auto 로 설정 할 수 있 습 니 다.물론 상술 한 구조 라면 이런 문제 가 없 겠 지만 빅 데이터 렌 더 링 에 부 딪 혀 오후 내 내 나 를 괴 롭 혔 다.
drag 이벤트
우선 드래그 하 는 요소 에 draggable 속성 을 연결 해 야 합 니 다.와탭 을 제외 하고 true 를 설정 해 야 합 니 다.다른 요 소 는 모두 설정 해 야 합 니 다.그 다음 에 세 가지 사건dragend,dragover,drop(Vue 로 쓴 것 은 사건 전에 on 을 추가 하지 않 는 다)주의dragover기본 동작 을 제거 하고 이벤트 에서 올 려 야 합 니 다$event.preventDefault().그렇지 않 으 면 드래그 할 때 마우스 가 있 습 니 다.🚫드래그 가 유효 하지 않 음 을 표시 합 니 다.drag 의 요 소 는 drop 의 위치 로 값 을 전달 합 니 다.사용 해 야 합 니 다$event.dataTransfer.setData("node", transNodeData)"node"는 데 이 터 를 전달 하 는 변수 명 으로 먼저JSON.stringify() methods:{ dragstart(e,nodeObj){ console.log('🐉drag 가 이동 하 는 지점',nodeObj.name,); let transData=JSON.stringify(nodeObj)//전 달 된 데 이 터 를 드래그 하여 JSON 형식 으로 전환 합 니 다. e.dataTransfer.setData("node",transData) }, dragover(e){ e.preventDefault() }, drop(e,nodeObj){ console.log('🐉drop 이 도착 한 지점',nodeObj.name); let getData=JSON.parse( e.dataTransfer.getData("node")) console.log('데이터 가 져 왔 습 니 다',getData); } } 이 점 을 알 게 되 었 습 니 다.다음 에 해 야 할 일 은 가 져 온 드래그 포인트 데 이 터 를 점 위치children배열 에 두 고dragend이벤트 에서 드래그 점 위 치 를 부모 노드children배열 에서 삭제 하 는 것 입 니 다.노드 의 색인 은dragstart이벤트 가 발생 할 때 가 져 옵 니 다.또한eventBus이 구성 요소 통신 방식 으로dragendVuex(사용 가능)에 전달 된다.bus 폴 더 를 만 들 고 index.js 파일 을 새로 만 듭 니 다. import Vue from "vue" const busEvent= new Vue({ data(){ return{ dragNodeIndex:-1,//드래그 노드 가 부모 노드 children 배열 에 있 는 index } }, created(){ this.$on("transDragNodeIndex",res=>{//$on 을 통 해$emit 를 감청 하려 면 사용자 정의 이벤트 가 실행 되 기 전에 감청 되 어야 합 니 다.즉,구독 이 발표 보다 먼저 이 루어 져 야 합 니 다.그렇지 않 으 면 데 이 터 를 감청 할 수 없습니다.이벤트 Bus 는 별로 사용 하지 않 았 습 니 다.이것 은 구덩이 라 고 할 수 있 습 니 다. this.dragNodeIndex=res }) } }) export default busEvent 구성 요소 에 도입eventBus,이때dragstart에서$emit을 통 해 사용자 정의 이 벤트 를 터치 한 후$on이 데 이 터 를 받 을 수 있 습 니 다.dragend에서eventBus이 색인 을 가 져 온 다음 배열 에서 삭제 할 수 있 습 니 다. 다음은 논리 적 판단 을 하 는 것 입 니 다.예 를 들 어 부모 노드 를 하위 노드 로 드래그 할 수 없습니다.먼저 재 귀 방식 으로 부모 노드 의 모든 하위 노드 의 name 을 한 배열 에 옮 겨 놓 습 니 다.만약 에 drop 위치name가 배열 에서 부모 가 아들 에 이 르 렀 음 을 나타 내 고 상 태 를 true 로 설정 합 니 다. ifFatherDragToSon(dragObj,dropObj){/부모 노드 가 하위 노드 로 이동 하 였 는 지 판단 if (dragObj.children.length === 0) return false; let newArr = []; function getAllName(dragObj) { newArr.push(...dragObj.children); if (dragObj.children.length === 0) { return; } else { for (let i = 0; i < dragObj.children.length; i++) { getAllName(dragObj.children[i]); } } } getAllName(dragObj); if (newArr.includes(dropObj)) { return true; } return false; } eventBus을 통 해dragend이벤트 획득 상 태 를true로 직접 return자신 에 게 드래그 해도 안 됩 니 다.바로 return.일부러 주전 자 를 들 고 충 점 위치 에 키 노드 를 추가 한 것 은 노드 가 창고 에 있 는 주 소 를 통 해 판단 하 는 것 이지name속성 에 근거 하 는 것 이 아니 라 검증 하기 위해 서 이다. 또 하 나 는 drag 이벤트 의$event.dataTransfer.dropEffect를 언급 하면 얻 을 수 있 는 값 은move,copy,none,link이 고 다음 그림 에서 해당dropEffect입 니 다.🚫드래그 포인트 가 사 라 졌 습 니 다.사실은dragend이벤트 의 코드 를 실 행 했 고drop이벤트 의 코드 가 실행 되 지 않 았 기 때문에 이 단 계 는 먼저 프로 세 스 통 제 를 해 야 합 니 다.또한 브 라 우 저의 기본 값dropEffect도 360 브 라 우 저 와 다르다 는 것 을 설명 한다.코드 연결
이상 은 vue 가 드래그 가능 한 트 리 구조 도 를 실현 하 는 상세 한 내용 입 니 다.vue 가 트 리 구조 도 를 실현 하 는 데 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
ASP.NET Core MVC 전역 경로 접두사 설정
JavaScript XML 2 단계 연결 드 롭 다운 목록 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage