如何在 reactjs 中使组件可拖放？

问题描述

我开发了使用 reactJs 拖放元素的代码，元素可以被拖拽但不能放在可放置的位置。当我拖动元素并进入可放置区域时，它成功传递了在控制台中显示的数据。但唯一的问题是元素不能放置在可放置区域。所以任何人都可以请指导我找到我在这里做错了什么？

export class Beautiful extends Component {
  constructor(props) {
    super(props)

    this.state = {
      items: [
        {
          name: "milk",expiryDate: "16-01-2020"
        }
      ],}
  }

  onDrop = (ev,cat) => {
    ev.preventDefault()
    let id = ev.dataTransfer.getData("id");
    console.log(id);
  }
  onDragStart = (ev,id) => {

    console.log('dragstart:',id);
    ev.dataTransfer.setData("id",id);
    // let ExpiryDate=ev.dataTransfer.setData("expiryDatae",expirydate)
  }
  onDragOver = (ev) => {
    ev.preventDefault();
  }
  render() {

    return (
      <div>
        {this.state.items.map((data,index) => {
          return (
            <div>
              <ul className="list-unstyled">
                <li draggable key={data.name}
                  onDragStart={(e) => this.onDragStart(e,data.name)}> {data.name}
                </li>
                <li draggable key={data.name}
                  onDragStart={(e) => this.onDragStart(e,data.expiryDate)} >{data.expiryDate}</li>
              </ul>
            </div>)
        })}
        <div id="div1" onDrop={(e) => this.onDrop(e,"todo")} onDragOver={(e) => this.onDrop(e)}>

        </div>
      </div>
    )
  }
}

export default Beautiful

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）