你如何使用 React-DND 移动拖拽源?
How do you move a dragsource with React-DND?
如何使用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
移动拖动源,如 here;
移动浏览器拖动时不显示拖动源的阴影。您需要使用DragPreview
来绘制移动。
如何使用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
移动拖动源,如 here;
移动浏览器拖动时不显示拖动源的阴影。您需要使用DragPreview
来绘制移动。