reactjs - 使用自定义拖动层的 react-dnd 可排序列表

Question

我用 react-dnd 创建了一个简单的可排序列表，使用的代码类似于在 codesandbox 中找到的 react-dnd 的可排序示例。 .

但是，我在尝试概念化如何调整此示例并利用 react-dnd 的 custom drag layer 时遇到了一些困难。自定义拖动预览。具体来说，我想在开始拖动组件后更改它的背景颜色。没什么太复杂的。

为什么我需要使用自定义拖动层？因为由于浏览器 API 和 react-dnd 的 HTML5 后端(我正在使用的)的限制，我无法使用 CSS 设置拖动预览的样式。

我无法在可排序列表中找到任何使用自定义拖动层的示例，因此我们将不胜感激。

Answer 1

我最近确实遇到了同样的问题，并且不得不承认这方面的文档不存在，这让我很伤心地想办法解决问题。

创建 CustomDragLayer

我用过这个example (效果很好，当你刚接触这个库时，它只是有点不知所措)并创建了一个简单的 CustomDragLayer 组件:

import { DragLayerMonitor, useDragLayer } from 'react-dnd'

const CustomDragLayer: React.FC = () => {  
    
    const {isDragging, currentOffset, item} = useDragLayer(
        (monitor: DragLayerMonitor) => {
            return {
                isDragging: monitor.isDragging(),
                currentOffset: monitor.getSourceClientOffset(),
                item: monitor.getItem()
            };
        }
    );

    return isDragging && currentOffset
        ? <div style={{ 
              // functional
              transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
              position: 'fixed',
              top: 0,
              left: 0,
              pointerEvents: 'none', 
        
              // design only
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '150px',
              height: '50px',
              border: '1px solid red',
              color: 'red'
          }}>
              Dragging {item.id}
          </div> 
        : null;
};

export default CustomDragLayer;

它期望您拖动的项目有一个名为 id 的属性(正如它显示的那样)。大多数样式属性并不重要，您需要确保设置了 transform、position、top 和 left.

坐标是朝向窗口的绝对坐标，因此 position: fixed 使生活更轻松，否则可能需要一些额外的计算。

由于这个issue ，你必须添加 pointerEvents: 'none' 否则悬停/放下检测在 Firefox 中无法正常工作，我也注意到 Chrome 中的一些奇怪行为(无法将项目拖动到元素上有点击处理程序附加到它)。添加此属性似乎可以解决问题。

隐藏原始元素

现在您已经渲染了自定义拖动的元素，但是，原始源元素是可见的并且也随鼠标移动。这使得体验非常难看。在这里，我采用了 example 中的方法。并向我的 Draggable 对象添加了一个没有依赖项的 useEffect Hook (在类组件中使用 componentDidMount )，该对象利用来自 html5 后端的空图像渲染功能并隐藏了原始预览。

我决定做的最后一件事是在拖动时隐藏源项目。我使用 visibility 样式属性来保留 dom 中的原始位置，并使其看起来像是该项目实际上正在移动。这也取决于上下文，您可能会决定以不同的方式处理。

这是 Draggable 代码摘录:

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

const Draggable: React.FC = () => {

    // ...

    const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        // ...
    }));

    useEffect(() => {
        dragPreview(getEmptyImage())
    }, []);

    return <div ref={drag} style={{ visibility: isDragging ? 'hidden' : 'inherit'}}>
        {/* your draggable content here*/}
    </div>;
};
export default Draggable;

将 CustomDragLayer 添加到 dom

最后，一旦您拥有所有这些，您需要将自定义拖动元素安装在 dnd 根组件内的 dom 树中的某个位置。

return <div ref={drop}>
    <Draggable ref={drag} />
    <CustomDragLayer />
</div>

希望这有助于理解它的基本工作原理。