Custom delete events do not work

[XiaoBaiClassmate]

 <Sortable :list="taskList" class="table-wrapper-web" item-key="id" tag="div" :options="options" @add="addEntry"
            @update="moveEntryWithinList" @remove="removeNestedEntry">
            <template #item="{ element }">
                <div :data-parent-id="parentId" :data-entry-id="element.id" :data-entry-type="element.type" class="drawing-item">

                    <span class="drawing-item-copy" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleCopyItem(element)">
                        <icon :size="14">
                            <CopyDocument />
                        </icon>
                    </span>

                    <span class="drawing-item-delete" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleDeleteItem(element)">
                        <icon :size="14">
                            <Delete />
                        </icon>
                    </span>

                </div>
            </template>
        </Sortable>

const options = ref({
    handle: '.drawing-item',
    group: 'desgin',
    animation: 100,
    forceFallback: true,
    fallbackOnBody: true,
    ghostClass: "sortable-ghost"
})

Clicking the delete event inside the item does not respond, but fires the ghost event

[MaxLeiter]

Can you share removeNestedEntry?

[XiaoBaiClassmate]

@MaxLeiter Thanks for the reply，But it doesn't fire the click event。Blocked by the sortable choose event.

[XiaoBaiClassmate]

@MaxLeiter #42 As with this issue, it works fine in Firefox but occasionally fails to click delete in Chrome.

[XiaoBaiClassmate]

Well, I have a solution.

reproduce:

1. Suppose the options object has a handle property class as its outermost property and a button click event action.
2. In this case, dragging the chosen event conflicts with the button click event

solution

1. Add an element and fill it with absolute position

 <Sortable :list="taskList" class="table-wrapper-web" item-key="id" tag="div" :options="options" @add="addEntry"
            @update="moveEntryWithinList" @remove="removeNestedEntry">
            <template #item="{ element }">
                <div :data-parent-id="parentId" :data-entry-id="element.id" :data-entry-type="element.type" class="drawing-item">
                   //now
                   <span class='drawing-click' ></span>

                    <span class="drawing-item-copy" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleCopyItem(element)">
                        <icon :size="14">
                            <CopyDocument />
                        </icon>
                    </span>

                    <span class="drawing-item-delete" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleDeleteItem(element)">
                        <icon :size="14">
                            <Delete />
                        </icon>
                    </span>

                </div>
            </template>
        </Sortable>

drawing-click{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

[MaxLeiter]

I'm tempted to close this as invalid, it doesn't seem like a problem with the library?

[XiaoBaiClassmate]

@MaxLeiter emmm, close , The library chosen event conflicts for the item click event.