Question

我正在尝试实现一个简单的拖动预览，它会覆盖默认的浏览器行为，但我似乎无法找到正确的模式，而且文档引用了一组简单的示例，而没有解释层次结构的更大背景工作

以下是一些代码：当前不起作用 - 不确定如何链接它，以便拖动项目的预览显示[项目]而不显示其他项目。我如何建立此链接？我在这里缺少什么？

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到目前为止非常容易使用和利用。这是我认为可以从进一步的文档中受益的预览片，一旦我对这一切的工作原理有了更透彻的了解，我很乐意添加它。

Answer 1

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

一旦到位，一切正常。

ReactDnd拖动预览 - 找不到合适的模式

1 个答案: