# @dragdroptouch/drag-drop-touch 中文文档规范地址：https://npmcn.com/package/%40dragdroptouch/drag-drop-touch/ 版本：2\.0\.3 npm 元数据更新时间：2025-06-16T22:40:25.794Z 中文译文更新时间：2026-11-12T18:50:33.639Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40dragdroptouch/drag-drop-touch 原文对照：https://npmcn.com/package/%40dragdroptouch/drag-drop-touch/?lang=original 项目主页：https://github.com/Bernardo-Castilho/dragdroptouch#readme 源码仓库：https://github.com/Bernardo-Castilho/dragdroptouch ## 关键信息（来自 npm 元数据） - 包体积（解压后）：33.9 kB，5 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2025-06-13T17:14:21.480Z - 最新版本发布：2025-06-13T17:25:56.484Z - 近 30 天下载量：42483（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：2（近 12 个月 0 个） ## 中文简介为触摸设备提供 HTML5 拖放支持的多填充 ## 安装 ```sh npm install @dragdroptouch/drag-drop-touch ``` 也可以使用：`pnpm add @dragdroptouch/drag-drop-touch`、`yarn add @dragdroptouch/drag-drop-touch`、`bun add @dragdroptouch/drag-drop-touch` ## README # 拖动DropTouch 在移动(touch)设备上允许 HTML5 拖放支持的多填. HTML5的规格包括支持拖放操作. 不幸的是,这个规格是基于鼠标事件,而不是指针事件,因此大多数移动浏览器都不执行. 因此, 依赖 HTML5 拖放的应用程序降低了功能当移动设备运行时. 这个 `DragDropTouch` 类是将触摸事件翻译为标准 HTML5 拖放事件。如果你在页面上添加多填充, 拖放操作应该像它们一样在移动设备上工作在桌面上进行. ## 演示 - [单击这里播放演示](https://drag-drop-touch-js.github.io/dragdroptouch/demo/) 此演示既适用于桌面,也适用于移动设备,包括 iPads和Android平板电脑. 要在桌面上测试, 请打开“ 响应 ” 设计模式”,它既是浏览器开发工具中的一个按钮,因为和热钥匙 `ctrl-shift-M` 在 Windows 和 Linux 上,或 `cmd-shift-M` 在麦克. ## 如何"安装" ### 使用软件包管理器此软件包在 npm 注册中为 `@dragdroptouch/drag-drop-touch` 并可以安装任何能够从 npm 注册 : ``` npm install -s @dragdroptouch/drag-drop-touch yarn install @dragdroptouch/drag-drop-touch pnpm add @dragdroptouch/drag-drop-touch ``` ### 就像一个文件添加数据 [`drag-drop-touch.esm.js`](https://raw.githubusercontent.com/drag-drop-touch-js/dragdroptouch/refs/heads/master/dist/drag-drop-touch.esm.js) 或者说 [`drag-drop-touch.esm.min.js`](https://raw.githubusercontent.com/drag-drop-touch-js/dragdroptouch/refs/heads/master/dist/drag-drop-touch.esm.min.js) 将脚本多填充到您的页面, 以允许拖放带有触摸输入的设备 : ```html ``` 说明 `?autoload` 查询参数 `src` URL: 此加载多填充并立即启用它,这样你不需要自己写任何代码. 如果省略,则图书馆将设置一个 `window.DragDropTouch` 对象只有一个功能, `DragDropTouch.enable(dragRoot, dropRoot, options)`。。。 . 所有三个论点都是可选的。如果离开, `DragDropTouch.enable()` 简单填充整个页面。如果您只想要将多填充应用到特定元素虽然,你可以调用 `enable` 每组需要多填充的元素. 还注意到 `type="module"`,这需要。如果离开,你可能会获得类似浏览器错误 : ``` Uncaught SyntaxError: import.meta may only appear in a module ``` ### 使用 CDN 权限您也可以使用 jsDelivr 等 CDN 解决方案加载库 : ```html ``` ## 这是JS ES模块作为ES模块,您也可以在任何其他脚本中将此多填充作为导入: ```js import { enableDragDropTouch } from "./drag-drop-touch.esm.min.js"; // Set up the default full page polyfill: enableDragDropTouch(); // Or, explicitly polyfill only certain elements enableDragDropTouch(dragRootElement, dropRootElement); // Or even explicitly polyfill only certain elements with non-default behaviour const options = { // ... }; enableDragDropTouch(dragRootElement, dropRootElement, options); ``` ## 多种填充行为这个 **拖动DropTouch** 多填充将收听器附加到文档的触摸事件 : - 打开 **触摸开始**,它检查目标元素是否有可拖动属性或包含在有属性的元素中。如果是这样,它保存“ drag source” 元素的引用并预防默认处理事件. - 打开 **触摸移动**,它检查触摸是否移动了某个阈值距离来源。如果是这样,它提高 **拖动** 事件和持续监测动作 **拖动** 财务报告和审定财务报表 **拖放叶**。。。 . - 打开 **触控端**,它提高 **拖动端** 财务报告和审定财务报表 **丢入** 事件. 避免干扰一些触摸事件的自动浏览器翻译在鼠标事件中,多填充执行一些额外任务: - 举起 **鼠标移动**, (中文(简体) ), **鼠标下移**, (中文(简体) ), **鼠标上**,以及 **单击** 当用户触及可拖动的元素但不开始拖动, - 举起 **dbl 点击** 当点击后有新的触控开始时, 财务报告和审定财务报表 - 举起 **上下文菜单** 触摸持续一段时间但用户不时发生的事件开始拖曳元素. ## 超越多填充行为以下选项可传递到辅助功能,以改变多填充工程 : - **允许 Drag 滚动** 是决定是否允许在拖曳到达屏幕边缘。这也可以是 `true` 或者说 `false`, (中文(简体) ), 已经 `true` 默认. - **上下文** 是数以毫秒计,我们会等待到多填充在长按下触发上下文菜单事件。此值为 900 到默认. - **拖曳图像** 确定“ 垃圾占位符” 的透视方式, 即拖曳时应附加在光标上。此值是一个数字 0表示完全透明,1表示完全不透明. 此值默认为 0. 5 . - **拖曳滚动百分比** 是位于如果 **允许 Drag 滚动** 旗帜是真实的(这是默认值)。此值为 10 默认. - **拖曳滚动** 是一个拖动事件时要滚动的像素数在炎热的区域。此值默认为 10 . - **拖动危险像素** 是触摸运动需要的像素数在多填充开关之前实际移动到拖动模式而不是单击模式. 此值默认为 5 - **是新闻机** 表示多填充的旗帜在多填充拖动事件之前需要。此值可以是 `true` 或者说 `false`,并且已经 `false` 默认. - **强制听** 是决定多填充是否应该启用, 不论浏览器是否显示正在运行触摸装置或不。此值为 `true` 默认. - **按住缓存器**: 多填充将等待的毫秒数在它认为活跃的媒体是"漫长的媒体"之前. 此值为 400 默认. - **按 HoldMargin 键** 是允许触摸事件漂移的像素数在媒体的漫长开端中此值默认为 25 . - **按 Holdshold 像素** 是决定是否长的媒体实际上开始长的媒体, 或者开始一触即发. 此值默认为 0 . ## 谢谢 - 感谢Eric Bidelman在 HTML5 拖放上的伟大辅导: [原生 HTML5 拖放](http://www.html5rocks.com/en/tutorials/dnd/basics/)。。。 . - 还感谢克里斯·威尔逊和保罗·金兰关于老鼠和触摸事件的文章: [触摸和鼠标](http://www.html5rocks.com/en/mobile/touchandmouse/)。。。 . - 多亏了蒂姆·鲁夫尔斯的iOS shim代码 [iOS DragDrop Shim 软件](https://github.com/timruffles/ios-html5-drag-drop-shim)。。。 . ## 许可证 [MIT 许可证](https://npmcn.com/package/%40dragdroptouch/drag-drop-touch/LICENSE) ## 对于开发者如果你想在这个库里工作,叉子和克隆寄存器,那么运行 `npm install` 安装所有依赖,然后一次性 `npm run dev:setup`,用于安装运行所需的组件综合测试. ### 正在测试此寄存器使用标准 `npm test` 命令来运行构建和综合测试。构建测试包括使用 `tsc`, (中文(简体) ), 使用自动格式化 `prettier`,并将其汇编成三个捆(调试、正常和微缩) `esbuild`. 综合测试见于 `tests/touch.spec.js` 文件,使用 Playwright 作为测试跑取器. 此外, `npm run test:debug` 将使用 `DEBUG` 声明保存下来,在测试失败时有用而你正在试图找出实际发生的情况. ### 手工测试要在浏览器中手动测试, 您可以运行 `npm start` 然后打开初始构建任务完成后打印到控制台的 URL . 它运行一个本地服务器, 允许您运行演示页面, 但使用 `drag-drop-touch.esm.min.js` 改为a `drag-drop-touch.debug.esm.js` 相反,它保留了TypeScript源中使用的所有调试语句. 要添加您自己的调试语句, 请使用 `DEBUG:` 标签随后普通语句,或用新块包裹的多个语句. ## 常见问题 ### @dragdroptouch/drag-drop-touch 是什么？为触摸设备提供 HTML5 拖放支持的多填充 ### 如何安装 @dragdroptouch/drag-drop-touch？在项目目录运行 npm install @dragdroptouch/drag-drop-touch，或使用 pnpm add / yarn add / bun add。 ### @dragdroptouch/drag-drop-touch 支持 TypeScript 吗？该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dragdroptouch\_\_drag-drop-touch 是否存在。 ### @dragdroptouch/drag-drop-touch 支持 ESM 还是 CommonJS？以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @dragdroptouch/drag-drop-touch 可以商用吗？ @dragdroptouch/drag-drop-touch 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @dragdroptouch/drag-drop-touch 的下载量有多少？根据 npm 官方下载统计，@dragdroptouch/drag-drop-touch 在 2026/10/13 – 2026/11/11 这 30 天内被下载 42,483 次，日均约 1,416 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @dragdroptouch/drag-drop-touch 还在维护吗？最新版本 2\.0\.3 发布于 2025/06/14（1\.4 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/06/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。