html5 dragAPI
- draggable属性(布尔值能否拖拽)
- onDragStart 开始拖拽
- onDragEnter 当被鼠标拖动的对象进入其容器范围内时触发此事件
- onDragOver 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- onDragEnd 结束拖拽
onDragOver(e) {
e.preventDefault();
}
onDragStart = () => {}
onDragEnd = () => {}
private weakMap = new WeakMap()
<div
draggable={draggable && !adjustDisabled && opened}
onDragEnter={this.onDragEnter}
onDragOver={this.onDragOver}
onDragStart={this.onDragStart}
ref={(ref) => ref && this.weakMap.set(ref, value)} //注意判空，ref可能不存在
onDragEnd={this.onDragEnd}
>
</div>
注意事项
- 如果拖拽的元素内部含有文字，在设置draggable为false的情况下也有可能拖拽，需要设置样式：文字不能被复制。
div{
user-select:none;
}
-
ref={(ref) => ref && this.weakMap.set(ref, value)} 注意判空，ref可能不存在,需要判空
