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可能不存在,需要判空