我正在应用程序中构建拖放功能,其中拖放区域如下所示:

<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
    }

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

最佳答案

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

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

  • 我们可以访问target element,例如在
  • 上拖放的元素
  • 我们可以通过DataTransfer设置任意数据

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

    我们还需要确定要拖放到的与layers数组相对应的元素。这可以通过将每个layer的索引绑定(bind)为属性来实现,以便我们可以通过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>
    

    注意我将相同的索引绑定(bind)到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

    关于javascript - 从事件获取Vue组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58964476/

    10-12 04:31
    查看更多