Click event on child element

[quantumwebco]

A button with @click.stop=$emit('your-event') inside a draggable element never captures the click event, so you can't have clickable elements inside a draggable container. Tried all kinds of options and can't figure out how to emit a custom event from a child element of a draggable element. Any help greatly appreciated.

[quantumwebco]

My bad, got this working with filter and preventOnFilter options. I just hadn't configured it correctly

[XiaoBaiClassmate]

@quantumwebco hello,I also encountered this problem, can you share the solution in detail? thank you

[quantumwebco]

@XiaoBaiClassmate I completely changed that code now but I was trying to have a button to move the element from one list to another, by looking at the commits on that date I added a class swapLists to the button that emits the event in the child element and on the draggable instance added attributes filter=".swapLists" and preventOnFilter="true"

Something like

<draggable
      filter=".swapLists"
      preventOnFilter="true"
      class="w-full h-full h-min-6 border border-slate-300 p-4"
      handle=".cursor-grab"
      v-model="email.body"
      group="emailElements"
      v-bind="{animation: 250}"
      item-key="index">
  <template #item="{element, index}">
      <EmailElement :element="element" list="email" @swapLists="swapLists"></EmailElement>
  </template>
</draggable>

and in the EmailElement component

<div class="rounded shadow p-4 mb-2 cursor-grab flex items-center">
    <div>
        {{ element.name }} : {{ element.content }}
    </div>
    <div class="ml-auto">
        <button class="p-2 swapLists" @click.stop="$emit('swapLists',  {item: element.item, list: list})">
            <Icon icon="akar-icons:arrow-right-left"/>
        </button>
    </div>
</div>

I found most of this info by carefully reading the docs and previous issues, so if you're still stuck the answers are definitely there, keep looking!