I have a dynamic list of contenteditables rendered in Svelte and want to be able to drag them to resort them but on:drop or on:dragover both don’t seem to be firing. I was thinking it was because it thinks I am trying to drop it on the children elements but if I move those events to a child it still doesn’t fire or show the correct cursor.
<div
on:dragover|preventDefault={handleDragOver}
on:dragenter|preventDefault={handleDragEnter}
on:drop={handleDrop}
>
<div
on:dragstart={handleDragStart}
on:dragend={handleDragEnd}
draggable="true"
>
/* Child div here that looks like list bullet (where I want the user to hover to begin dragging */
/* contenteditable div here */
</div>
</div>
There is nothing actually happening in the functions each event is calling except a console.log() to see if it is firing. The events on the draggable div fire fine, but on the parent div I want it to drop to no events are fired. What am I missing?
Thanks in advance