”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 你能解决这个问题吗?

你能解决这个问题吗?

发布于2024-09-26
浏览:492

Can you solve this problem?

假设我们有两个 div,一个内部 div,另一个外部 div。

内部 div 负责缩放和平移(使用 CSS 变换、平移和缩放完成)。

现在可以通过拖放将新的 div 添加到内部 div 中。放置事件被outerdiv

接受

现在,在放置事件期间,您可以获得 clientX、clientY 位置,现在使用它找到相对于内部 div 的正确放置位置。

这是一个可能的解决方案(但缩放时最终位置有偏移)

handleDrop = (e) => {

  const canvasContainerRect = outerDivBoundingRect()
  // const canvasRect = innerDivBoundingRect()

  let finalPosition = { 
            x: (e.clientX - canvasContainerRect.left  - translateX) / zoom,
            y: (e.clientY - canvasContainerRect.top - translateY) / zoom,
        }

  console.log("final: ", finalPosition)
}
版本声明 本文转载于:https://dev.to/paul_freeman/can-you-solve-this-problem-e22?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 那么 Pull 请求如何再次发挥作用呢?屏显#3
    那么 Pull 请求如何再次发挥作用呢?屏显#3
    在我之前的文章中,我谈到了启动一个基于开源 GenAI 的终端应用程序。本周的任务是为另一个用户的项目贡献一个新功能。由于我们必须与新人合作,所以我与 Lily 合作,她开发了一款应用程序,其代码改进功能与我的类似,只是她的角色是老鼠! 有空的话可以去看看她的项目老鼠助手。 她的代码是用 TypeS...
    编程 发布于2024-11-07
  • 为什么 Go 中不能直接将 []string 转换为 []interface{}?
    为什么 Go 中不能直接将 []string 转换为 []interface{}?
    为什么将 []string 转换为 []interface{} 会在 Go 中引发编译错误转换字符串切片 ([]string)考虑到它们共享切片特征以及 []string 的每个元素都可以被视为一个接口,Go 中的接口切片 ([]interface{}) 似乎很简单。然而,尝试这种转换时会出现编译错...
    编程 发布于2024-11-07
  • 理解 Shadow DOM:封装 Web 组件的关键
    理解 Shadow DOM:封装 Web 组件的关键
    在现代 Web 开发中,创建可重用和可维护的组件至关重要。 Shadow DOM 是 Web 组件标准的一部分,在实现这一目标方面发挥着至关重要的作用。本文深入探讨了 Shadow DOM 的概念、它的优点以及如何在您的项目中有效地使用它。 什么是 Shadow DOM? Shado...
    编程 发布于2024-11-07
  • 如何使用 Java 运行时解决输出重定向问题?
    如何使用 Java 运行时解决输出重定向问题?
    使用 Runtime 的 exec() 方法解决输出重定向问题在 Java 中,利用 Runtime.getRuntime().exec() 运行命令可以捕获进程的输出和错误流。但是,在需要输出重定向的情况下,单独使用此方法可能无效。问题:输出未重定向当使用 Runtime.getRuntime()...
    编程 发布于2024-11-07
  • 如何使用 CSS 悬停效果从左到右填充背景颜色?
    如何使用 CSS 悬停效果从左到右填充背景颜色?
    使用 CSS 从左到右填充背景颜色在 CSS 中,您可以通过利用线性渐变和动画背景定位来创建迷人的悬停效果。这种方法使您能够在悬停时从左到右用新颜色填充元素的背景。线性渐变和背景大小关键是使用由两种颜色组成的线性渐变背景,并将背景大小设置为元素宽度的两倍。这允许您在两种颜色之间创建无缝过渡。背景定位...
    编程 发布于2024-11-07
  • GraalVM 本机映像中的内存管理
    GraalVM 本机映像中的内存管理
    内存管理是计算机软件开发的重要组成部分,负责应用程序中内存的有效分配、利用和释放。其重要性在于增强软件性能,保证系统稳定性。 垃圾收集 垃圾收集 (GC) 在 Java 和 Go 等当代编程语言中至关重要。它自动检测并回收未使用的内存,从而减轻开发人员手动管理内存的需要。 GC 的概...
    编程 发布于2024-11-07
  • ## 在 C++ 中什么时候应该使用引用作为函数参数?
    ## 在 C++ 中什么时候应该使用引用作为函数参数?
    在 C 中传递参数:理解引用在 C 中,函数参数的行为由其类型决定。一个重要的区别是“按值传递”和“按引用传递”。为什么在函数参数中使用引用?引用在函数参数中用于两种情况主要原因:修改参数: 引用允许函数修改传递的参数的值。这意味着该函数可以进行调用者可见的更改。避免对象复制: 通过引用传递大对象可...
    编程 发布于2024-11-07
  • 如何在单个命令行中运行多行命令?
    如何在单个命令行中运行多行命令?
    如何在一行命令行中执行多行语句使用Python的-c选项执行单行循环时,在循环之前导入模块会导致语法错误。这是因为Python解释器将代码块视为单个语句。要解决此问题,可以采用以下几种方法:使用管道要克服语法错误,请使用 echo 命令将代码块作为一系列输入行重定向到 Python:echo -e ...
    编程 发布于2024-11-07
  • 如何在 PHP 中从 MySQL 迁移到 MySQLi?
    如何在 PHP 中从 MySQL 迁移到 MySQLi?
    从 MySQL 迁移到 MySQLi将网站从 MySQL 迁移到 MySQLi 需要修改 PHP 代码,但数据库本身基本上不受影响。 MySQLi 是 MySQL 扩展的改进版本,提供增强的功能和安全性。PHP 代码更改是的,您可以简单地将 MySQLi 函数替换为 MySQL 函数。这里有一个快速...
    编程 发布于2024-11-07
  • 如何在CSS中实现背景和子元素的不同透明度?
    如何在CSS中实现背景和子元素的不同透明度?
    理解 CSS 背景不透明度在 CSS 中,不透明度控制元素的透明度。当应用于容器时,它自然会影响背景及其子元素。继承问题要实现背景和子元素不同的不透明度, CSS 继承带来了挑战。子元素从其父容器继承不透明度,从而导致所提供示例中的背景和文本具有相同的不透明度。实现所需不透明度的解决方案实现要达到所...
    编程 发布于2024-11-07
  • 【个人网站】Next如何集成Notion数据库
    【个人网站】Next如何集成Notion数据库
    To integrate a Notion database into a Next.js project, you can use Notion as a content management system (CMS) and display its content on your website...
    编程 发布于2024-11-07
  • 为什么 PhpMyAdmin 在 Ubuntu 12.04 上给出“MySQLi 扩展缺失”错误?
    为什么 PhpMyAdmin 在 Ubuntu 12.04 上给出“MySQLi 扩展缺失”错误?
    PhpMyAdmin 错误:MySQLi 扩展缺失在 Ubuntu 12.04 上遇到 PhpMyAdmin 问题?尽管安装了 Apache2、PHP5、MySQL 和 PhpMyAdmin,您还是遇到了“mysqli 扩展丢失”错误。尽管您已取消注释 php.ini 中的“extension=my...
    编程 发布于2024-11-07
  • 如何使用 java.net.URLConnection 将文件和附加参数上传到 HTTP 服务器?
    如何使用 java.net.URLConnection 将文件和附加参数上传到 HTTP 服务器?
    在 Java 中使用附加参数将文件上传到 HTTP 服务器将文件上传到 HTTP 服务器是许多应用程序的常见需求。但是,有时还需要随文件一起传递附加参数。这是一个允许您在不使用外部库的情况下发送文件和参数的解决方案:java.net.URLConnection 和 Multipart/Form-Da...
    编程 发布于2024-11-07
  • 如何在 PHP 中逐行读取和处理文本文件?
    如何在 PHP 中逐行读取和处理文本文件?
    在 PHP 中读取文本文件:分步指南许多 Web 开发场景都涉及从文本文件读取数据。在 PHP 中,文件处理函数提供了逐行读取纯文本文件的便捷方法。让我们分解一下使用 PHP 读取文本文件的过程。读取文本文件的代码:以下 PHP 代码片段演示了如何读取文本文件并逐行处理其内容:<?php //...
    编程 发布于2024-11-07
  • 我离不开的生产力工具(奖励)
    我离不开的生产力工具(奖励)
    大家好,你们的孩子 Nomadev 带着另一篇帖子回来了!今天,我很高兴与大家分享一些我每天使用的超级酷的人工智能工具。这些工具已成为我日常工作的重要组成部分,帮助我保持井井有条、高效并完成更多工作。 在当今快节奏的世界中,我们都希望提高生产力和效率。借助人工智能,有大量工具可以帮助我们管理任务、简...
    编程 发布于2024-11-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3