Skip to main content

Drag & Drop

event
drag拖动元素
dragend拖动结束
dragenter拖动元素进入 可 drop 区域
dragleave离开 drop 目标
dragover
dragstart开始拖动一个元素
dropdrop 元素
tip
  • 定义了 ondragover, ondrop 表示为可 drop 区域
  • drop 之前, dragstart、dragover 时是无法访问文件
  • e.dataTransfer.types
    • Files - 表示为文件
  • e.dataTransfer.dropEffect
    • copy
    • move
    • link
    • none - 禁止 drop
function onDragStart(ev) {
// 限定
ev.dataTransfer.setData('application/my-app', ev.target.id);
ev.dataTransfer.effectAllowed = 'move';

// 检测文件
const isFiles = ev.dataTransfer.types.indexOf('Files') >= 0;
}