拖动DropTouch
在移动(touch)设备上允许 HTML5 拖放支持的多填.
HTML5的规格包括支持拖放操作. 不幸的是,这个规格是基于鼠标事件,而不是 指针事件,因此大多数移动浏览器都不执行. 因此, 依赖 HTML5 拖放的应用程序降低了功能 当移动设备运行时.
这个 DragDropTouch 类是将触摸事件翻译为
标准 HTML5 拖放事件。 如果你在页面上添加多填充,
拖放操作应该像它们一样在移动设备上工作
在桌面上进行.
演示
此演示既适用于桌面,也适用于移动设备,包括
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
或者说
drag-drop-touch.esm.min.js
将脚本多填充到您的页面, 以允许拖放带有触摸输入的设备 :
<script src="drag-drop-touch.esm.min.js?autoload" type="module"></script>
说明 ?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 解决方案加载库 :
<script
src="https://cdn.jsdelivr.net/npm/@dragdroptouch/drag-drop-touch@latest/dist/drag-drop-touch.esm.min.js"
type="module"
></script>
这是JS ES模块
作为ES模块,您也可以在任何其他脚本中将此多填充作为导入:
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 拖放。 。 。 .
- 还感谢克里斯·威尔逊和保罗·金兰关于老鼠和触摸事件的文章: 触摸和鼠标。 。 。 .
- 多亏了蒂姆·鲁夫尔斯的iOS shim代码 iOS DragDrop Shim 软件。 。 。 .
许可证
对于开发者
如果你想在这个库里工作,叉子和克隆寄存器,那么运行
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: 标签随后
普通语句,或用新块包裹的多个语句.