Question

我正在我的应用程序中构建拖放功能，拖放区域如下所示：

<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"事件，该事件仅使我可以访问html元素，而不能访问Vue组件。

这是我当前的dragover事件的样子：

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

如何获取该元素所属的组件？

Answer 1

Vue当然允许您access a component instance，但是我认为没有必要达到您的实际目标：通过拖放来重新排列组件。

拖放意味着我们受DragEvent提供的功能的限制：

我们可以访问target element，例如元素被拖放到
我们可以通过DataTransfer

由于放置元素包含所有图层，因此无法确定放置元素的位置。相反，如果每一层都是放置元素，则可以通过event.target通过dragover确定是哪一层。

我们还需要确定要拖放的layers数组对应的元素。这可以通过将每个layer的索引绑定为一个属性来实现，以便我们可以通过event.target访问它。

为简单起见，我将使用id属性，以便稍后可以通过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获得drop元素。我们可以通过在第一次开始拖动时在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);
},

Example codepen

从事件获取Vue组件

1 个答案: