跳到主要内容

HTML5

React DnD 新手？ 在进入文档之前请阅读概述

HTML5

这是 React-DnD 支持的主要后端。它使用 HTML5 拖放 API在引擎盖下并隐藏其怪癖。

安装​

npm install react-dnd-html5-backend

Extras​

除了默认导出之外，HTML5 后端模块还提供了一些额外功能：

  • getEmptyImage(): 返回一个透明的空 图片的函数。使用DragSourceConnector的 connect.dragPreview() 完全遮罩浏览器内容来绘制拖动预览。方便绘制使用“拖动层”的自定义拖动层。请注意，自定义拖动预览在 IE 中不起作用。

  • NativeTypes: 三个常量的枚举，NativeTypes.FILE, NativeTypes.URL 和NativeTypes.TEXT。你可以为这些类型注册drop targets 来处理原生文件、URL或常规页面文本的放置。

使用​

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default function MyReactApp() {
  return (
    <DndProvider backend={HTML5Backend}>
      /* your drag-and-drop application */
    </DndProvider>
  )
}

当你在监视器上调用 getItem() 时，HTML5 后端会根据放置类型公开来自事件的各种数据：

  • NativeTypes.FILE:
    • getItem().files, 文件数组
    • getItem().items, 使用 event.dataTransfer.items（你可以在放置目录时使用它来列出文件）
  • NativeTypes.URL:
    • getItem().urls, 放置了URLs的数组
  • NativeTypes.TEXT:
    • getItem().text, 已放置的文本