如何在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);
}

注意：您必須在onDragStart處理程序中調用setDragImage方法。 在onDrag所使用的方法中將無法使用。

Answer 2

在此處的html5拖放標准的文檔中： https : //developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragfeedback

您可以看到如何更改光標下顯示的半透明圖像。 您可以設置為更離散的圖像（或畫布），甚至可以設置為空白圖像，例如new Image()

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

但我建議您不要使用空白圖像，因為您需要某種視覺提示來進行拖放。