如何在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"

- Sathya

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);
}

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

- Paul Freeman

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);

但我建议不要使用空白图片，因为您需要一定的视觉提示来进行拖放操作。

- vassiliskrikonis

---

太棒了！像魔法一样顺利地工作了。 - Adrian Smith

这是我第一次直接从SO复制粘贴代码到我的代码中，而且第一次就成功了。这应该成为被采纳的答案。 - PsiKai

Answer 3

我还会为整个拖放区域添加CSS属性：user-select: none;，因为选择区域作为文本（在许多情况下默认启用）会导致文本本身可拖动，这可能看起来与拖动可拖动元素（图像或仅是div）相同，但实际上并非如此，进一步导致混淆和错误。

- user8376713