Javascript 从事件获取vue组件

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

然后可拖动的项目如下所示：

在我的拖拽事件中，我希望获得元素所关联的当前组件，因此当我将一个项目拖拽到

元素上时，我希望获得该组件。我不知道如何访问它，因为一个事件被传递到

@dragover=“onDragOver”

事件，该事件只允许我访问html元素，而不允许访问Vue组件

这就是我当前的

dragover

事件的样子：

public onDragOver（evt:DragEvent）{
evt.preventDefault（）
如果（！evt.target）返回
让layer=（evt.target作为HtmleElement）。最接近的（'.layer'）作为HtmleElement
}

---

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

Vue当然允许您这样做，但我认为没有必要实现您的实际目标：通过拖放重新排序组件

拖放意味着我们受到以下条件的限制：

• 我们可以访问，例如，正在拖放的元素
• 我们可以通过

由于drop元素包含所有层，因此无法确定元素的放置位置。相反，如果每个层都是一个放置元素，那么您可以通过

event.target

确定它是哪一层

我们还需要确定要拖放的

层

数组对应的元素。这可以通过将每个

层的索引

绑定为属性来实现，这样我们就可以通过

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>

现在，在drop上，我们可以访问这两个层，并可以根据需要操纵

层

：

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);
},

---

能否请您详细说明您打算如何使用该组件？是关于组件还是实际上是关于将

层添加到
层
？如果您想到Gimp或PhotoShop，它们都有层，您可以拖动层来重新排序。我的每个层都是一个层组件，您可以通过拖动来重新排序。我遇到的问题是找到用户在元素列表中删除层的位置。所以我想得到组件的偏移量并将层移动到那里…您可以在
层中使用
@dragend
事件，并在该事件中发射到父级。您甚至可以发出实例，例如，
this.$emit（'layerDragEnd'，this）。
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);
},