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拖動預覽 - 找不到

回答

相關問題