0

如何使用鼠标光标使源元素移动react-dnd？

这就是我正在做的（简化示例）：

import React from 'react';
import ReactDom from 'react-dom';
import {DragDropContext, DragSource} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

@DragSource("zzzz", {beginDrag: props => ({})}, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))
export class DND extends React.Component {
  render () {
    const text = this.props.isDragging ? "YAY": "DND";

    return this.props.connectDragSource(
      <div>{text}</div>
    );
  }
}

@DragDropContext(HTML5Backend)
export class Application extends React.Component {
  render() {
    return <div><DND /></div>;
  }
}

ReactDom.render(
  <Application />,
  document.getElementById('react-mount')
);

当我单击并拖动它时，文本会从DND变为YAY，但 div 不会跟随鼠标移动。

我经历过的示例似乎没有手动更新目标 x/y 坐标，我假设这是由库本身管理的。我错过了什么？

编辑：

我没有提到在 Chrome devtools 中模拟移动设备时会发生这种情况。它在桌面模式下按预期工作。

我目前正在考虑使用这里DragLayer看到的移动拖动源；

4

1 回答 1

1

移动浏览器在拖动时不显示拖动源的阴影。您需要使用DragPreview来绘制移动。

于 2017-03-20T06:30:20.387 回答