이벤트에서 vue 구성 요소 가져오기

이벤트에서 vue 구성 요소 가져오기

어플리케이션에서 드래그 앤 드롭 기능을 구축하고 있습니다.드롭 영역은 다음과 같습니다.

<template>
  <div class="layers-panel" @dragover="onDragOver" @drop="onDragDrop">
    <layer
      v-for="(layer, index) in layers"
      :key="layer.name"
      :info="layer"
      :offset="index"
      ref="layer"
    ></layer>
  </div>
</template>

끌 수 있는 항목은 다음과 같습니다.

<template>
  <div class="layer" draggable="true" @dragstart="onDragStart">
    <!-- Content of draggable element -->
  </div>
</template>

드래그 오버이벤트에서는 요소가 관련된 현재 컴포넌트를 취득하고 싶기 때문에 아이템을 드래그하여<div class="layer"...>그 부품을 입수하고 싶습니다.이벤트가 에 전달되기 때문에 이 접근 방법을 잘 모르겠습니다.@dragover="onDragOver"이벤트에서는 vue 컴포넌트가 아닌 html 요소에만 액세스할 수 있습니다.

이게 내 전류야dragover이벤트는 다음과 같습니다.

    public onDragOver(evt: DragEvent) {
      evt.preventDefault()
      if (!evt.target) return
      let layer = (evt.target as HTMLElement).closest('.layer') as HTMLElement
    }

그 요소가 속한 컴포넌트를 입수하려면 어떻게 해야 하나요?

Vue에서는 컴포넌트 인스턴스에 액세스할 수 있지만 드래그 앤 드롭을 통한 컴포넌트 재정렬이라는 실제 목표를 달성할 필요는 없다고 생각합니다.

드래그 앤 드롭은 Drag-and-Drop이 제공하는 기능에 제한이 있음을 의미합니다.

• 대상 요소에 액세스할 수 있습니다(예: 끌거나 떨어뜨리는 요소).
• DataTransfer를 통해 임의의 데이터를 설정할 수 있습니다.

드롭 요소에 모든 레이어가 포함되어 있기 때문에 요소를 드롭할 위치를 결정할 수 없습니다.각 레이어가 드롭 요소인 경우, 어느 레이어를 경유하는지를 판별할 수 있습니다.event.target.

또, 어떤 요소가, 어느 것에 대응하고 있는지를 특정할 필요가 있습니다.layers끌어다 놓거나 하는 어레이입니다.이것은 각각의 인덱스를 바인딩함으로써 달성할 수 있다.layer접속할 수 있도록 속성으로서event.target.

간단하게 하기 위해서, 저는id나중에 접속할 수 있도록 Attribute를 클릭합니다.event.target.id:

<div
  v-for="(layer, idx) in layers"
  :key="idx"
  :id="idx"
  draggable="true"
  @dragstart="dragstart"
>
  <div
    :id="idx"
    class="draggable"
    @dragover="dragover"
    @drop="drop"
  >
    {{ layer }}
  </div>
</div>

대상 계층을 올바르게 식별할 수 있도록 동일한 인덱스를 id에 바인딩합니다.

그리고 그 이후로 끌어온 요소를 확실히 밝혀내야 합니다drop드롭 엘리먼트는event.target데이터를 설정함으로써 이 작업을 수행할 수 있습니다.DataTransfer끌기를 처음 시작할 때:

dragstart(event) {
  event.dataTransfer.setData("selectedIdx", event.target.id);
},

이제 두 가지 모두에 액세스할 수 있고layers델이 원하는 대로:

drop(event) {
  var selectedIdx = event.dataTransfer.getData("selectedIdx");
  var targetIdx = event.target.id;
  var selected = this.layers.splice(selectedIdx, 1)[0];
  this.layers.splice(targetIdx, 0, selected);
},

코드펜의 예

언급URL : https://stackoverflow.com/questions/58964476/get-vue-component-from-event