如何在拖放示例中获取放置项目的对象？

Question

使用 AlpineJs 2.8，我重新制作了拖放示例 https://codepen.io/trovster/pen/oNjGGMq

基于动态数据，当物品掉落时，我需要获取任何元素的物品 ID，我尝试让它在放置事件时解析事件。展望 console https://prnt.sc/115ikf5 我看到 event.srcElement，但它是 strin，不是 object，我想从中获取 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

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

如何获取掉落物品的对象？

谢谢！

Answer 1

我发现在传输对象中设置用户信息的决定：

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

并在放置事件中读取这些数据：

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

如何在拖放示例中获取放置项目的对象？

How get object of dropped item in drag-and-drop example?

javascript

alpine.js