Get $event on drag-enter/drag-leave

[chrisdel101]

I am having an issue grabbing the event from these handlers. They fire okay but I am not sure how to get the event.

@drag-enter="onDragEnter($event)"

function onDragEnter(e) {
   console.log(e) //returns undefined
}

I've also tried adding vanilla events and they don't seem to work. Even a click handler does not work. Is there a way I can get the event from those two drag events?

[zerosym]

@chrisdel101 drag-enter & drag-leave events don't pass any parameters to handlers.

As for click handlers and other browser implemented events you can append .native to the event name:

@click.native="onClickHandler($event)"

[chrisdel101]

Good tip. Click works.

I can't get the drag event to work. I am unsure of the syntax of drag events in Vue so this might be my bad. I tried various versions such as:

@ondragleave
@dragleave
@ondrag
@drag

Is the library overriding them or is my syntax wrong? I need to get the value of the dropzone on dragenter. I'm about to use refs.

[zerosym]

Drag and drop libraries (usually?) avoid using the native html drag/drop implementation so you won't be getting the browser native drag events.

As for your specific case... maybe I'm not understanding something but each vue-dnd container (dropzone) should fire its own drag-enter / drag-leave events so you should be able to just use those? For example:

onDragEnter() {
  console.log(this.value) // this refers to the component containing the dropzone that fired the drag-enter 
}

Or you could wrap the event handler

@drag-enter="() => onDragEnter(someParams...)"

onDragEnter(someParams) { ... }

[krsyoung]

@chrisdel101 did you get something working here?

@zerosym thanks for your suggestion but I'm stuck with the same issue (the this seems to refer to the overall Vue component, not the Container itself).

[chrisdel101]

I couldn’t get @zerosym syntax to work. I had a function that fired on drop on all the containers. Then on the each fire, I incremented an index, and used this in an array of data, and refs.

I wasn’t able to get any event info other than what the library provides.

[krsyoung]

Thanks for the feedback @chrisdel101, and clever approach.

I ended up getting something working with the second syntax (although my use case was only to highlight the "drop" area):

<Container
...
@drag-enter="() => onDragEnter(level.id)"

In my method:

    onDragEnter: function (id) {
      this.hoverId = id
    },

Then in my div I dynamically set the class based on the hoverId matching the current Container id.

<div :class="['card-drop-zone', (level.id === hoverId) ? 'active-drop-zone' : '']">

A little goofy but works for now! Could not find any other examples of people using the feature, but seems like, per your comment, something is missing or we're somehow misusing it.

[zerosym]

@krsyoung For your case that's what I would do too.

My first syntax only works if you have split the container into its own component.

For example, instead of:

<template>
  <container v-for="i in items" ...>
</template>

You would need to do

<template>
  <my-component v-for="item in items" :item=item :key="item.id">
</template>

Where my-component is:

<template>
  <container @drag-enter="onDragEnter">
</template>

<script>
{
  props: ['item',],
  methods: {
    onDragEnter() {
      console.log(this.item.id)
    },
  },
}
</script>