ReactDnd拖动预览 - 找不到

我想实现一个简单的拖放预览覆盖缺省浏览器行为正确的模式，但我似乎无法找到正确的模式，和文档是指一个简单的没有解释图层如何工作的大背景。ReactDnd拖动预览 - 找不到

下面是一些代码：不工作目前 - 不知道如何链接它，这样的预览拖动的项目显示[项目]，而不是其他项目。我如何制作这个链接？我在这里错过了什么？

import React, { Component } from 'react'; 
import { DragDropContext, DragSource, DropTarget, DragLayer } from 'react-dnd'; 
import HTML5Backend, { getEmptyImage } from 'react-dnd-html5-backend'; 

const types = { 
    Item: 'ITEM' 
}; 

class Item extends Component { 
    componentDidMount() { 
    this.props.connectDragPreview(getEmptyImage()); 
    } 

    render() { 
    const { name, connectDragSource, isDragging } = this.props; 
    return connectDragSource(
     <div> 
      <div> 
      {name} 
      </div> 
     </div> 
    ) 
    ); 
    } 
}; 

const DraggableItem = DragSource(types.Item, 
    { 
    beginDrag(props) { 
     const { name } = props; 
     return { 
     name 
     }; 
    } 
    }, 
    (connect, monitor) => { 
    return { 
     connectDragSource: connect.dragSource(), 
     connectDragPreview: connect.dragPreview(), 
     isDragging: monitor.isDragging() 
    }; 
    } 
)(Item); 

const ItemPreview = ({ item, isDragging }) => { 
    if (!isDragging) 
    return null; 
    return (
    <div>[{item ? item.name : null}]</div> 
) 
}; 

const ItemLayer = DragLayer(
    monitor => { 
    return { 
     isDragging: monitor.isDragging(), 
     item: monitor.getItem() 
    }; 
    } 
)(ItemPreview); 

const Dnd =() => { 
    return (
    <div> 
     <DraggableItem name="Item A" /> 
     <DraggableItem name="Item B" /> 
     <DraggableItem name="Item C" /> 
     <ItemLayer /> {/* Clearly wrong. */} 
    </div> 
); 
}; 

export default DragDropContext(HTML5Backend)(Dnd);

对于什么是值得的，我发现ReactDnd到目前为止非常容易使用和利用。这是我认为可以从更多文档中获益的预览版，我很乐意在更全面地了解这一切的工作原理后再添加它。

来源

2017-08-10 Adam Donahue

正如我预料的那样，答案显而易见，但从文档中并不特别清楚：必须设置预览组件本身的（x，y）位置，通常通过使用内联样式从DragLayer容器的监视器中的道具来计算其正确的位置。

一旦这项工作到位，一切正常。

来源

2017-08-11 19:24:29

ReactDnd拖动预览 - 找不到

回答

相关问题