拖放dataTransfer.getData总是得到空字符串

发布于 2025-01-21 16:13:27 字数 563 浏览 0 评论 0原文

我正在尝试执行简单的拖放功能。我想通过 dataTransfer.setData（）将一些数据设置在拖动中，然后通过 dataTransfer.getData（）将其置于删除。我总是得到空字符串（“”）。

请检查链接以获取复制示例 https://codesandbox.io/codesandbox.io/s/quizzical-lamport.io/squizzical-lamport -p7cqiv？file =/src/sample.js

拖动和检查控制台

我的环境：

浏览器： chrome

os： windows

React UI库

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

↙厌世 2025-01-28 16:13:27

您正在使用错误的事件。您应该使用Ondragstart事件：

import React from "react";

class Abc extends React.Component {
  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  allowDrop(ev) {
    ev.preventDefault();
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    console.log("data", data);
  }
  render() {
    return (
      <>
        <div id={"some_id"} onDragStart={this.drag} draggable={true}>
          Drag Me
        </div>

        <div onDragOver={this.allowDrop} onDrop={this.drop}>
          Drop On me
        </div>
      </>
    );
  }
}

export default Abc;

You're using the wrong event. You should use the onDragStart event:

import React from "react";

class Abc extends React.Component {
  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  allowDrop(ev) {
    ev.preventDefault();
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    console.log("data", data);
  }
  render() {
    return (
      <>
        <div id={"some_id"} onDragStart={this.drag} draggable={true}>
          Drag Me
        </div>

        <div onDragOver={this.allowDrop} onDrop={this.drop}>
          Drop On me
        </div>
      </>
    );
  }
}

export default Abc;

回复收藏 0 原文

~没有更多了~