React-dnd: connectDragPreview() 组件也显示为常规组件

创建于 2017-05-28 · 3评论 · 资料来源: react-dnd/react-dnd

也许这可能是https://github.com/react-dnd/react-dnd/issues/399 的副本
这可能是已知的行为，但如果可以实现以下效果会很好：

render () {
        const { connectDragSource, connectDragPreview, isDragging } = this.props;

        return (
            <div className='top'>
                <div>Ordinary</div>
                {connectDragSource (<div>Dragabble</div>)}
                {connectDragPreview (<div>my preview</div>)}
            </div>
        );
}

我希望我的预览组件仅显示为实际预览，而不是普通组件。
但这显示<div>my preview</div>低于“顶部”div 内的实际可拖动组件。我不希望它显示在那里，而只是作为预览。这能实现吗？

wontfix

资料来源

croraf

所有3条评论

这是（使用自定义拖动层）：
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

这是代码的相关部分：

import { getEmptyImage } from 'react-dnd-html5-backend';

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    if (this.props.connectDragPreview) {
      this.props.connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      });
    }
  }

maierson 于 2017-06-05

👍1

你好
我需要在 dragSource 组件旁边构建一个自定义的 dragPreview 组件，但是当我在 componentDidMount() 中使用上面的代码时，它在拖动时不显示预览。

wiadev 于 2019-04-23

此问题已自动标记为陈旧，因为它最近没有活动。如果没有进一步的活动发生，它将被关闭。感谢你的贡献。

stale[bot] 于 2019-07-06

👎2

此页面是否有帮助？

0 / 5 - 0 等级

React-dnd: connectDragPreview() 组件也显示为常规组件

所有3条评论

相关问题