我在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"
首先在small transparent image创建一个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
使用的方法。
在这里的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);
但我建议不要使用空白图像,因为你需要某种视觉提示来进行拖放。