我正在应用程序中构建拖放功能,其中拖放区域如下所示:
<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提供的功能所限制:
您无法确定放置元素的位置,因为您的放置元素包含所有图层。相反,如果每一层都是放置元素,则可以通过
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/