如何在拖放示例中获取已删除项目的对象？答案

【问题标题】：How get object of dropped item in drag-and-drop example?如何在拖放示例中获取已删除项目的对象？
【发布时间】：2021-04-08 19:08:46
【问题描述】：

使用 AlpineJs 2.8，我从 https://codepen.io/trovster/pen/oNjGGMq

基于动态数据，当项目被删除时，我需要获取任何元素的项目 ID，我尝试让它在 drop 事件上解析事件。调查控制台https://prnt.sc/115ikf5我看到event.srcElement，但它是字符串，不是对象，我想从中获取 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

笔链接：https://codepen.io/sergeynilov/pen/zYNobRP

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

谢谢！

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

我找到了在传输对象中设置用户信息的决定：

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

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

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

【讨论】：