如何在拖放示例中获取拖放项目的 object？

Question

With AlpineJs 2.8 I remake drag-and-drop example from https://codepen.io/trovster/pen/oNjGGMq

based on dynamic data and when item dropped I need to get item ID of any element, I try to make it parsing event on drop event. Looking into console https://prnt.sc/115ikf5 I see event.srcElement, but it is strin, not object, from which I want to get ID:

        toListingDropped: function (event) {
            console.log('toListingDropped event::')
            console.log(event)

            console.log('toListingDropped event.srcElement::')
            console.log(event.srcElement) // I expect this link to dragable item - but I see html code, not object
            console.log('toListingDropped event.srcElement.id::')
            console.log(event.srcElement.id) // I need to get thuis ID

Pen link: https://codepen.io/sergeynilov/pen/zYNobRP

How to get object of dropped item?

Thanks!

Answer 1

I found a decision with setting user info in Transfer Object:

x-on:dragstart.self="
    dragging = true;
    event.dataTransfer.effectAllowed='move';
    event.dataTransfer.setData('user', JSON.stringify(nextUser));
"

and reading these data on drop event:

let droppedUser = JSON.parse(event.dataTransfer.getData('user'))