如何在reactjs拖动事件中隐藏ghost图像?

时间:2017-08-16 07:21:29

标签: javascript html css reactjs

我在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"

1 个答案:

答案 0 :(得分:1)

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

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