2

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

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

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

4

1 回答 1

1

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

一旦到位，一切正常。

于 2017-08-11T19:24:29.587 回答