html5 拖拽API使用

html5 dragAPI

• draggable属性(布尔值能否拖拽)
• onDragStart 开始拖拽
• onDragEnter 当被鼠标拖动的对象进入其容器范围内时触发此事件
• onDragOver 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
• onDragEnd 结束拖拽

onDragOver(e) {
    e.preventDefault();
}
onDragStart = () => {}

onDragEnd = () => {}

private weakMap = new WeakMap()

 ref && this.weakMap.set(ref, value)} //注意判空，ref可能不存在
    onDragEnd={this.onDragEnd}
>

注意事项

• 如果拖拽的元素内部含有文字，在设置draggable为false的情况下也有可能拖拽，需要设置样式：文字不能被复制。

div{
    user-select:none;
}

• ref={(ref) => ref && this.weakMap.set(ref, value)} 注意判空，ref可能不存在,需要判空