html5 拖拽API使用

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可能不存在,需要判空
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容