CSS 指针事件 – 接受拖动,拒绝点击

2024-01-08

太棒了;我需要一个元素来注册拖放指针事件,但将单击和其他指针事件传递给其后面的元素。

我正在使用 React 构建拖放照片上传功能react-dropzone https://react-dropzone.netlify.com/。我想要dropzone覆盖整个页面,因此如果将文件拖到页面的任何部分,您可以将其放下来上传图像。这dropzone当没有文件拖过它时是透明的,所以我需要单击来注册其后面的元素。

为了实现这一点,我为 dropzone 组件指定了以下样式:

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;

然而,pointer-events: none;导致dropzone无法识别必要的拖放事件。有什么方法可以识别这些特定的指针事件,同时将其他事件(例如单击)传递给后面的元素dropzone?


尝试使用draggable属性。这对我有用

<p draggable="true">
  jkjfj
</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 指针事件 – 接受拖动,拒绝点击 的相关文章

随机推荐

  • Nginx 使用 CORS 和凭据

    我正在构建一个通过 Nginx 服务器与 Laravel API 进行通信的 Web 应用程序 我尝试按照 Nginx 网站上的说明进行操作完全开放的科尔斯 https enable cors org server nginx html 但
  • 无法解析符号 WebSecurityConfigurerAdapter

    我尝试在我的 java 应用程序中创建基本身份验证 对于他们 我在 gradle 文件中使用了这个依赖项 dependencies compile group org springframework boot name spring boo
  • Netlogo HPC CPU 使用百分比增加

    我通过以下方式使用无头 NetLogo 将作业提交到 HPC 服务器code bin bash N r20p q all q pe mpi 24 home abhishekb netlogo netlogo 5 1 0 netlogo he
  • RuntimeException 未安装 Zip PHP 扩展

    我是 Linux 新手 我刚刚安装了 Composer 和 Laravel 但是当我运行laravel new project我收到以下错误 RuntimeException The Zip PHP extension is not ins
  • 如何将 Jupyter 中的数据框导出为 csv 文件

    我有一个数据框另存为df在 jupyter 笔记本中 我想将其导出到桌面上的 csv 文件中 对于 pandas 数据框 您可以使用df to csv data csv https pandas pydata org pandas docs
  • 已发布并等待 RabbitMQ / EasyNetQ 主题的回复 - 如何仅获取您的主题?

    当发布者期望得到消息的答案时 如何确保在扩展时它只能得到 与其自己的消息相关的 答案 我们有一个客户端进程 它发布一条消息以供服务器进程应答 此外 我们有一个 监听器 进程 只需要消耗问题和答案 而不需要发布任何内容 此外 服务器进程将来可
  • 如何在量角器中等待元素启用

    尝试单击按钮时量角器失败 最初 该按钮将处于禁用状态 稍后它将被启用 量角器认为该按钮已准备好并单击该按钮并失败 所以我希望量角器脚本等到按钮启用 我在下面尝试过 但没有成功 有人可以发布完整的代码来等待该元素被启用吗 expect bro
  • Apple 是否提供其使用的本地化术语索引?

    Apple 是否为开发者提供了一套不同语言的标准术语 我之所以问这个问题 是因为我正在对应用程序的部分内容进行本地化 并且希望在整个应用程序中一致应用标准术语 我采用了一些策略 通过更改设备上的语言并观察 Apple 如何用其他语言解释这些
  • 从 R 读取 .npz 文件

    I save npz来自 Python 的文件并想在 R 中读取它 我尝试使用npyLoad功能 但我收到此错误 library RcppCNPy Data lt npyLoad xx npz Error in npyLoad xx npz
  • 在 Objective-C 中封装 C 库的技巧

    我有一个用 C 编写的库 我想在 Mac 或 iPhone 上的 Objective C 应用程序中使用它 不幸的是 由于该库是由开源领域的个人编写的 因此文档非常稀疏且不完整 虽然我可以弄清楚如何使用库中的内容 但我并没有真正了解整个代码
  • 使用常量内存在 O(n) 内对 BST 进行排序

    这不是作业 只是一个有趣的任务 给定一个由数组表示的完全二叉搜索树 使用常量内存在 O n 内对数组进行排序 Example Tree 8 4 12 2 6 10 14 1 3 5 7 9 11 13 15 阵列 8 4 12 2 6 10
  • ASP.NET MVC - 如何从不同的控制器维护 ModelState?

    我有一个带有 Index 操作的 HomeController 该操作显示 Index aspx 视图 它有一个用户名 密码登录部分 当用户单击提交按钮时 它会 POST 到 AccountController 中的登录操作 在此操作中 它
  • 如何处理 Rails 应用程序的长请求,以便其他用户不会延迟太多?

    我在 Heroku 上有一个免费的 Rails 应用程序 它最近开始吸引一些用户 我的应用程序中的一个事件涉及查询另一个 API 最多可能需要 10 秒才能完成 如何确保同时访问简单页面的其他用户 作为另一个用户的 API 事件 不需要等待
  • 通过点击另一个标签来更改 html 标签的样式

    我有以下代码 parentAppliance 是主左侧导航表的一部分 将鼠标悬停在 Appliance 上时 我会看到一个包含 health 的子表 现在我希望当我点击健康时子表消失 有什么想法吗 CSS childAppliance di
  • 如何从源树中删除所有存储的密码

    我想从 SourceTree 中删除所有存储的密码 有什么办法可以删除所有的用户名和密码吗 None
  • 正则表达式随后捕获字符之前的第一个单词 - Postgresql

    参考这个问题 https stackoverflow com questions 66153909 regex capture first words before character subsequently 66154015但现在在 p
  • 如何创建在测试 Web 应用程序时使用的自签名 SSL 证书

    如何创建自签名 SSL 证书供 Apache 服务器在测试 Web 应用程序时使用 如何创建自签名 SSL 用于测试目的的证书 from http httpd apache org docs 2 0 ssl ssl faq html sel
  • Serilog 记录器接收器的最小和最大级别

    我们发现restrictedToMinimumLevel属性存在于 Serilog 中 但它是否也支持最大级别属性 之前我们已经使用过NLog其具有最小和最大日志记录级别 https github com NLog NLog wiki Co
  • 在编译时将 std::array 转换为另一种数据类型?

    C 11 中是否有一种方法可以在编译时将一种类型的数组转换为另一种数据类型 include
  • CSS 指针事件 – 接受拖动,拒绝点击

    太棒了 我需要一个元素来注册拖放指针事件 但将单击和其他指针事件传递给其后面的元素 我正在使用 React 构建拖放照片上传功能react dropzone https react dropzone netlify com 我想要dropz