HTML5 Drag and Drop

最后更新： 2018-01-05

阅读次数： 次

许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

HTML5 设置了 draggable 特性，表示元素是否可以被拖动。默认情况下，图像、链接、被选中文本是可以拖动的（即 draggable = true）。注意：一旦元素为可拖拽，元素中的文本或其他元素就无法通过鼠标点击或拖拽来实现选中了。

• 将一个元素设置为一个可放置目标的方法是：取消这个元素 dragenter、dragover 事件的默认行为。

拖动事件

• 拖动某元素时，依次触发下列事件（下面三个事件的目标元素都是拖动元素）
  • dragstart： 拖动元素的瞬间触发该事件
  • drag： 拖动元素持续触发该事件
  • dragend： 拖动停止时，放开鼠标左键，触发该事件（无论元素是否放置在有效放置目标上都会触发该事件）
• 当拖动元素碰上一个有效的放置目标时（下面四个事件的目标元素都是作为放置目标的元素）
  • dragenter： 元素进入有效放置目标的瞬间触发
  • dragover： 元素在有效放置目标内移动时持续触发该事件
  • dragleave： 元素离开了有效放置目标时触发
  • drop： 元素放置到有效目标上时触发

dataTransfer 对象

DataTransfer 对象，它是事件对象的一个属性，用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

• dataTransfer.effectAllowed： 限制用户可在元素上执行的放置类型，你可以在 dragstart 事件中设置拖动源数据时期望的动作效果

  • copy： 复制到新的位置
  • move：移动到新的位置
  • link：建立一个源位置到新位置的链接
  • copyLink： 允许复制或者链接
  • copyMove： 允许复制或者移动
  • linkMove： 允许链接或者移动
  • all： 允许所有的操作（默认值）
  • none： 禁止所有操作

• dataTransfer.dropEffect： 设置实际的放置效果，它应该始终设置成 effectAllowed 的可能值之一

  • copy： 复制到新的位置
  • move： 移动到新的位置
  • link： 建立一个源位置到新位置的链接
  • none： 禁止放置（禁止任何操作）
  • 这个属性只能在 dragenter 和 dragover 事件下进行设置，其他事件统一为默认值 none

• dataTransfer.files： 包含一个在数据传输上所有可用的本地文件列表（FileList）

• dataTransfer.getData(type)： 检索（取得）给定类型的数据，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串

• dataTransfer.setData(type,data)： 为一个给定的类型设置数据。如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。

• dataTransfer.clearData(type)： 删除与给定类型关联的数据，若未传入类型，则删除所有数据

实际应用

• 拖动文件上传

暂时就这样了，以后有了使用这个 API 的实际案例再补充。