vue 사용자 정의 명령을 사용하여 드래그 플러그인을 구축하는 방법

우리는 모두 html5의 드래그 특성을 알고 있다. 이를 이용하여 드래그와 배치 기능을 편리하게 실현할 수 있다. 예를 들어 일부 선택 조작의 사용 장면은 사용자가 드래그를 마우스로 클릭하는 것보다 쉽게 받아들이고 이해하도록 한다.오늘 우리는 이 특성을 이용하여 vue의 사용자 정의 명령을 결합하여 간단하지만 실용적인 드래그 플러그인을 실현할 것이다.
왜 플러그인이라고 합니까?우리의 목표는 하나의 vue 구성 요소를 개발하는 것이 아니라 두 개의 vue의 사용자 정의 명령을 개발하고 최종적으로 이 두 개의 사용자 정의 명령을 하나의es6의class에 봉인하여 실제 프로젝트에 도입하면 편리하게 사용할 수 있기 때문이다.
대부분의 드래그 앤 드롭 사용 장면은 A구역에서 B구역으로 일부 대기 요소를 드래그합니다.여기에는 두 가지 개념이 관련된다. 하나는 끌 수 있고 하나는 놓을 수 있다. 선택한 원소는 끌 수 있고 목표 구역(용기)은 놓을 수 있다.
만약 우리가 드래그할 수 있는 vue 구성 요소를 개발하거나 방치할 수 있는 구성 요소를 개발한다면, 그것은 단지 이 구성 요소만 드래그할 수 있을 뿐, 이때 변경이 필요하면, 또 다른 구성 요소도 드래그할 수 있도록 지원해야 한다. 그러면 우리는 다른 구성 요소도 드래그할 수 있는 코드를 작성해야 한다.아니면 다른 프로젝트도 드래그 기능이 필요하니 우리도 다시 개발해야 한다.이렇게 하면 유지보수와 복용에 매우 불리하다. vue의 사용자 정의 명령은 우리가 이 문제를 해결하는 데 도움을 준다. 우리는 구성 요소 (일반dom 요소 포함) 에 사용자 정의 명령을 추가하기만 하면 이 구성 요소 (요소) 를 드래그할 수 있고 유연하게 사용할 수 있다.
핵심 기능이 기본적으로 내장된 명령어 (v-model과 v-show) 를 제외하고 Vue도 사용자 정의 명령을 등록할 수 있습니다.Vue2.0에서 코드 재사용과 추상적인 주요 형식은 구성 요소입니다.그러나 일반적인 DOM 요소에 대한 밑바닥 조작이 필요한 경우도 있다. 이때 사용자 정의 명령을 사용한다.
결론적으로 본고의 목표는 두 가지 사용자 정의 지령을 완성해야 한다.

v-drag로 구성 요소를 드래그할 수 있습니다

v-drop 구성 요소 배치 가능

목표가 명확해졌으니 시작합시다!모든 구성 요소에서 이 두 명령을 사용할 수 있도록 하려면 Vue 글로벌 명령을 등록해야 합니다.

Vue.directive('drag', {
   bind(el, binding, vnode){
        // ， 。
        // 。
    }
})
Vue.directive('drop', {
   bind(el, binding, vnode){
        //
    }
})

만약 당신의 프로젝트가 vue-cli가 구축한 것이라면, 이 코드를main에 쓸 수 있습니다.js에서 vue 초기화 위쪽.
우리는drag 명령의 bind 갈고리에 코드를 작성합니다. bind는 한 번만 호출되며, 명령이 요소에 처음 연결될 때 호출됩니다. 그래서 우리는 bind 갈고리를 사용합니다.이 명령의 목표는 구성 요소 (원소) 를 드래그할 수 있도록 하는 것입니다. 따라서el의draggable를true로 설정합니다

el.draggable = true;
el.ondragstart = (event)=>{
  event.dataTransfer.setData("Text", "your data...");
}

원소가 드래그될 때 ondragstart 이벤트를 먼저 터치합니다. 보통 우리는 이 이벤트에서 이벤트의 데이터Transfer에 드래그 데이터를 설정합니다. 원소가 방치될 때 목표 용기에서 드래그된 데이터를 얻을 수 있기 때문입니다. 드래그가 데이터를 전달하지 못하면 의미가 없습니다.위의 코드는 데이터Transfer의 setData 방법을 호출하여 데이터를 드래그합니다. setData의 매개 변수 1은 데이터 형식을 표시하고 매개 변수 2는 전달할 데이터를 표시합니다.
불행하게도 드래그 데이터는 현재 문자열만 지원합니다. 복잡한 대상을 전달하려면 데이터를 서열화할 수 있습니다
다음에drop 명령의 bind 갈고리에 코드를 작성합니다. 이 명령의 목적은 구성 요소 (요소) 를 배치할 수 있도록 하는 것입니다. 따라서 원소의 ondragover (드래그 통과 이벤트), ondrop (배치 이벤트) 를 위한handler를 작성해야 합니다. 이 두 handler는 이벤트의 기본 행동을 막아야 합니다.

el.ondragover = (event)=>{
  event.preventDefault(); // 
}
el.ondrop = (event)=>{
  event.preventDefault();
  let dragData = event.dataTransfer.getData('Text'); // 
}

우리는 이벤트를 통과했다.데이터 전송의 getData 방법은 드래그 시작 이벤트에 설정된 드래그 데이터를 얻을 수 있습니다.
이제 이 두 명령을 모든 구성 요소에 추가할 수 있습니다. v-drag를 추가한 구성 요소는 드래그할 수 있고, v-drop를 추가한 구성 요소는 드래그 데이터를 배치하고 수신할 수 있습니다.

<MyComponent v-drag></MyComponent>

<MyContainer v-drop></MyContainer>

새로운 문제가 생겼다. 우리가 드래그 작업을 하는 것은 데이터를 전달하기 위해서이다. 그러나 데이터 전달의 시작 단계는 사용자 정의 지령drag의bind 갈고리에서 진행된다. 데이터 전달의 수신 단계는drop의bind 갈고리에서 진행된다. 그러면 데이터는 어디에서 오는가?어디 가세요?분명히 데이터는 구성 요소에서 왔고 다른 구성 요소에 전달되어야 한다. 그렇지 않으면 우리가 명령을 vue 구성 요소에 쓰면 아무런 의미가 없다.
다행히도 사용자 정의 명령의 갈고리 함수는 우리에게 구성 요소에 접근하는 가장 간단하고 효과적인 방식을 제공했다. 그것이 바로 갈고리 함수의 세 번째 매개 변수 vnode이다. vnode는 하나의 속성이componentInstance이고 이componentInstance는 사용자 정의 명령의 숙주이다. vue 구성 요소의 실례!
다음은 매우 쉽다. 우리는 v-drag를 추가한 구성 요소를 위해 드래그 데이터를 가져오는 인터페이스를 정의하고, v-drop를 추가한 구성 요소를 위해 드래그 데이터를 수신하는 인터페이스를 정의하면 된다.비록 vue 구성 요소는 인터페이스의 정의를 지원하지 않지만, 우리는 이 두 가지 방법명을 약속할 수 있으며, 구성 요소의method에서 실현하면 된다.

// 
methods:{
  getDragData(){ // getDragData 
    return this.id; // ， id 
  }
  setDragData(data){ // setDragData 
    this.appendNewChildById(data); // id 
  }
}

그리고 사용자 정의 명령 설정과 드래그 데이터를 전달하는 코드를 고칩니다.

let dragValue = "";
if(vnode.componentInstance.getDragData != undefined){
  dragValue = vnode.componentInstance.getDragData();
}
event.dataTransfer.setData("Text", dragValue);

v-drop 명령의 ondrop 이벤트

let dragValue = event.dataTransfer.getData('Text');
if(vnode.componentInstance.setDragData != undefined){
  vnode.componentInstance.setDragData(dragValue);
}

우리는 구성 요소의 인터페이스 방법에 접근할 때if판단을 추가했다. 인터페이스의 제약이 없기 때문에 구성 요소가 이러한 방법을 실현하지 못했을 수도 있다.
자, 여기까지 우리는 구성 요소 드래그의 사용자 정의 지령을 완전히 실현했습니다. 간단하지만 실용적이고 유연합니다. 기본적으로 일상적인 드래그의 수요를 만족시킬 수 있습니다. 전체 절차를 총괄합시다!

전역 명령 v-drag, v-drop 사용자 정의

드래그해야 하는 구성 요소가 데이터를 얻는 인터페이스 방법을 실현합니다

설치해야 할 구성 요소가 데이터를 수신하는 인터페이스 방법을 실현한다

drag 명령은 구성 요소에 접근하는 인터페이스 방법으로 데이터를 얻습니다

drop 명령 접근 구성 요소의 인터페이스 방법 데이터 전달

전역 사용자 정의 지령의 관련 코드를 es6의class에 봉인하여 단독 js 파일로 프로젝트에 넣거나 npm에 발표한 다음main.js에서 이 종류를 가져오고 정적 초기화 방법을 사용하면 전역 명령의 등록을 완성할 수 있습니다.이렇게 되면 프로젝트 중의 임의의 구성 요소는 모두 v-drag와 v-drop를 사용할 수 있다. 위에서 정리한 다섯 가지 절차는 제2, 3조만 실현하면 된다.
이상은 vue 사용자 정의 명령을 사용하여 드래그 플러그인을 구축하는 방법에 대한 상세한 내용입니다. vue 사용자 정의 명령을 사용하여 드래그 플러그인을 구축하는 방법에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!