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>

0 ответов

Другие вопросы по тегам