React 拖放：Div 拒绝拖动答案

【问题标题】：React Drag and Drop: Div Refuses DragReact 拖放：Div 拒绝拖动
【发布时间】：2020-02-13 17:21:42
【问题描述】：

我尝试构建一个具有拖放列表功能的 React 应用程序，而无需下载任何外部包。我发现 a tutorial 声称可以做到这一点

这是我的代码：

class App extends React.Component {
  state = {
    items: ["3", "2", "1", "4"]
  };

  onDragStart = (e, index) => {
    console.log("drag start!!!");
    this.draggedItem = this.state.items[index];
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", e.target.parentNode);
    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
  };

  onDragOver = index => {
    const draggedOverItem = this.state.items[index];

    // if the item is dragged over itself, ignore
    if (this.draggedItem === draggedOverItem) {
      return;
    }

    // filter out the currently dragged item
    let items = this.state.items.filter(item => item !== this.draggedItem);

    // add the dragged item after the dragged over item
    items.splice(index, 0, this.draggedItem);

    this.setState({ items });
  };

  onDragEnd = () => {
    this.draggedIdx = null;
  };

  render() {
    return (
      <div className="App">
        <main>
          <h3>List of items</h3>
          <ul>
            {this.state.items.map((item, idx) => (
              <li key={item} onDragOver={() => this.onDragOver(idx)}>
                <div
                  className="drag"
                  draggable
                  onDragStart={e => this.onDragStart(e, idx)}
                  onDragEnd={this.onDragEnd}
                  style={{ cursor: "pointer" }}
                />
                <span className="content" style={{ cursor: "pointer" }}>
                  {item}
                </span>
              </li>
            ))}
          </ul>
        </main>
      </div>
    );
  }
}

我在控制台中没有发现任何错误。但是，列表中的项目拒绝被拖动。如果我可以拖动一个项目，我无法将它带到我想去的地方，它会引入一个奇怪的间隙/空间：

这是我的密码箱：https://codesandbox.io/s/angry-dewdney-xzhsi

【问题讨论】：

我之前链接错了沙箱！更新：P

标签： javascript css reactjs drag-and-drop drag

【解决方案1】：

尝试更改渲染，让可拖动的 div 用如下文本包裹 span：

<div
 className="drag"
 draggable
 onDragStart={e => this.onDragStart(e, idx)}
 onDragEnd={this.onDragEnd}
 style={{ cursor: "pointer" }}
>
   <span className="content" style={{ cursor: "pointer" }}>
      {item}
   </span>
</div>

否则，您必须单击空 div，正如您所说，这几乎是不可能的。这样，可拖动的 div 会包裹文本，因此每当您单击文本时，您就是在单击 div。

【讨论】：