Vue Draggable: обработка событий в зоне сброса
У меня есть два перетаскиваемых компонента, CompA и CompB
----------------------
| |
| ----- ----- |
| | A | | B | |
| ----- ----- |
| |
----------------------
CompA содержит фотографии и разрешено перетаскивать в CompB
Я хочу знать фото, которые сброшены в CompB
Используя @start, событие @end в CompA, легко получить фотографию, получив event.draggedContext.element.
Но как я могу получить фотографию в CompB? Кажется, единственным событием, которое может быть вызвано, является @add, но я не могу получить удаленный элемент из события.
COMPA-вю:
<template>
...
<v-container grid-list-sm fluid>
<v-layout row wrap>
<draggable class="draggableArea" v-model="photos"
:group="{ name: 'photo', pull: 'clone', put: false }" :sort= false
@start="dragStart" @end="dragEnd"
>
<v-flex v-for="photo in photos" :key=photo.id xs6 d-flex>
<PhotoCard v-bind:photo="photo"></PhotoCard>
</v-flex>
</draggable>
</v-layout>
</v-container>
...
</template>
CompB-вю:
<template>
...
<v-container grid-list-sm fluid>
<v-layout row wrap>
<draggable
class="droppableArea"
:list="photos"
group="photo"
@add="onAdd"
>
<v-flex v-for="photo in photos" xs3 d-flex>
<PhotoCard v-bind:photo="photo"></PhotoCard>
</v-flex>
</draggable>
</v-layout>
</v-container>
...
</template>
<script>
...
methods : {
onAdd(event) {
console.log("dropping card to my deck");
console.log(event.draggedContext.element); // not able to get the element
}
...
</script>