飞跃高山与大洋的鱼飞跃高山与大洋的鱼
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
  • WEB

    • 无处归纳的 Web
    • 从 CLI 开始
    • HTML 拖放
      • 事件
        • 应用于被拖拽的元素
        • 应用于目标元素
        • 阻止默认行为
      • dataTransfer
      • 参考资料
    • 微前端

HTML 拖放

HTML 拖放(Drag and Drop) 接口使应用程序能够在浏览器中使用拖放功能。例如,用户可以使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable),并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随鼠标指针。

事件

应用于被拖拽的元素

  • drag:当拖拽元素时触发(每 100 毫秒触发一次)
  • dragstart:当用户开始拖拽一个元素时触发(从操作系统向浏览器拖拽文件时,不会触发)
  • dragend:当拖拽操作结束时触发(从操作系统向浏览器拖拽文件时,不会触发)

应用于目标元素

被拖拽的元素区域也可监听以下事件

  • dragenter:当拖拽到一个可释放目标时触发
  • dragover:当元素被拖到一个可释放目标上时触发(每 100 毫秒触发一次)
  • drop:当元素在可释放目标上被释放时触发
  • dragleave:当鼠标离开目标元素时触发

阻止默认行为

  1. 在 dragover 中,需要执行 event.preventDefault() 来阻止拖拽的默认操作,不知道这个默认操作是什么,但如果不阻止就不会触发 drop 事件
  2. 在 drop 中同样需要执行 event.preventDefault() 来阻止拖拽的默认操作,如在 Firefox 如果 data 是链接则会跳转

dataTransfer

直接通过 TypeScript 查看定义,可以看到是在 MouseEvent 的基础上增加了 dataTransfer 属性:

interface DragEvent extends MouseEvent {
  readonly dataTransfer: DataTransfer | null;
}

/** 
 * 用于保存拖放操作期间正在拖动的数据
 * 数据传递用全局变量不可以吗?如果仅在一个页面内拖东数据是没有问题的,但从桌面拖动到网页(或从网页拖动到桌面)则需要通过内置的 API。
 */
interface DataTransfer {
  /** 指定拖放操作所允许的一个效果 */
  effectAllowed: "none" | "copy" | "copyLink" | "copyMove" | "link" | "linkMove" | "move" | "all" | "uninitialized";
  /** 属性控制在拖放操作中给用户的反馈(通常是视觉上的,可就是没啥用) */
  dropEffect: "none" | "copy" | "link" | "move";

  /** 拖动的文件列表 */
  readonly files: FileList;
  /** 包含所有拖动数据列表的 DataTransferItemList 对象 */
  readonly items: DataTransferItemList;
  /** 返回在 dragstart 事件中(setData)设置的拖动数据格式的数组 */
  readonly types: ReadonlyArray<string>;

  /** 删除指定格式的数据。如果省略参数,则删除所有数据。 */
  clearData(format?: string): void;
  /** 返回指定的数据。如果没有此类数据,则返回空字符串。 */
  getData(format: string): string;
  /** 添加指定的数据。 */
  setData(format: string, data: string): void;
  /** 设置拖动图像 */
  setDragImage(image: Element, x: number, y: number): void;
}

参考资料

  • HTML 拖放 API
编辑文档!
上次更新:
贡献者: shanyuhai123
Prev
从 CLI 开始
Next
微前端