如何在reactjs拖动事件中隐藏鬼图像？

Question

我在react js中使用onDrag方法.我想在拖动图像时发生拖动,但我不想显示重影图像.我使用了css"-webkit-user-drag:none",但它完全阻止了拖动功能.我希望两者同时工作.

示例代码,

<img
                    style={{ left: `${pixels}px` }}
                    onDrag={this.dragOn.bind('start')}
                    onDragEnd={this.dragOn.bind(this, 'end')}
                    alt=""
                    height="20"
                    width="15"
                    draggable="true"

Answer 1

首先创建一个小的透明图像中componentDidMount：

componentDidMount() {
  this.dragImg = new Image(0,0);
  this.dragImg.src =
  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}

然后在您的处理程序中onDragStart：

handleOnDragStart = e => {
  e.dataTransfer.setDragImage(this.dragImg, 0, 0);
}

注意：您必须setDragImage在onDragStart处理程序中调用该方法。它在用于 的方法中不起作用onDrag。

Answer 2

在 html5 拖放标准的文档中： https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragfeedback

您可以看到如何更改光标下显示的半透明图像。您可以设置为更离散的图像（或画布），甚至可以设置为空白图像，例如new Image()

event.dataTransfer.setDragImage(new Image(), 0, 0);

但我建议不要使用空白图像，因为您需要某种视觉提示来进行拖放。