React 拖放：Div 拒绝拖动

Question

我尝试构建一个具有拖放列表功能的 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>
    );
  }
}

我在控制台中没有发现任何错误。但是，列表中的项目拒绝拖动。偶尔我可以拖动一个项目，我无法将它带到我想去的地方，它引入了一个奇怪的 gap/space:

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

Answer 1

尝试更改渲染器，让可拖动的 div 用这样的文本包裹跨度：

<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.

React 拖放：Div 拒绝拖动

React Drag and Drop: Div Refuses Drag

javascript

css

drag-and-drop

drag

reactjs