我正在开发一个使用画布图的React应用程序。我试图像这样检测拖动:
<canvas className="mycanvas" onDrag ={this.moveObj} onDragStart={this.startMoving} onDragEnd={this.stopMoving} onDoubleClick={this.createSelectedObj} ref={(mycanvas)=>{this.mycanvas= mycanvas;} }></canvas>
我可以拖动对象直到我点击或右键单击画布。单击或右键单击后,如果我尝试拖动它不会触发。它只在我双击画布后才会触发。
有谁知道这里出了什么问题?
答案 0 :(得分:1)
这个问题是因为在HTML5中onDrag和其他拖动相关的事件都是为拖放元素而设计的。它只能在阻力和火力下发射丢弃上下文。
要在画布中实现拖动行为,我使用了经典
mousedown,mouseup和mousemove事件
并使用
onDragStart={(e)=>{e.preventDefault();}
防止在拖放上下文中拖动。