关于拖拽时需要注意的细节

news2024/10/26 3:32:12

cklick,mousedown,mouseup 当触发点击事件后三者的触发顺序

在这里插入图片描述

当元素放大用scalse时,检测鼠标的移动距离用不用/scale?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Wonderful Paper</title>
    <style>
      #app{
        width: 400px;
        height: 400px;
        outline: red solid 1px;
        transform-origin: 0 0;
      }
      #app>div{
        width: 200px;
        height: 200px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app" >
      <div></div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

在这里插入图片描述
这是正常在这里插入图片描述
当改动scale时
在这里插入图片描述
在这里插入图片描述
可见页面上显示的是自动计算的结果
当改动元素宽高时
在这里插入图片描述
可见页面上显示的依旧是自动计算的结果
所以直接在原元素直接改鼠标的移动距离初始值即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2210558.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【专题】智启未来:新质生产力引擎驱动下的智能制造行业革新报告合集PDF分享(附原数据表)

原文链接&#xff1a; https://tecdat.cn/?p37856 在当今全球经济格局深刻变革的大背景下&#xff0c;制造业作为国家经济的基石&#xff0c;正处在高质量发展的关键历史时期。智能决策作为一股崭新的力量&#xff0c;正逐步成为推动制造业数智化转型的强大新动能。众多制造企…

C#|.net core 基础 - 删除字符串最后一个字符的七大类N种实现方式

今天想通过和大家分享如何删除字符串最后一个字符的N种实现方法&#xff0c;来回顾一些基础知识点。 01第一类、字符串方式 这类方法是通过string类型自身方法直接实现。 1、Substring方法 相信大多数人第一个想到的可能就是这个方法。Substring方法是字符串内置方法&#…

基于苔藓生长优化算法(Moss Growth Optimization, MGO)的多无人机协同三维路径规划(提供MATLAB代码)

一、苔藓生长优化算法介绍 苔藓生长优化算法&#xff08;Moss Growth Optimization, MGO&#xff09;是一种受自然界苔藓生长机制启发的元启发式优化算法。这种算法模仿了苔藓在潮湿环境中的扩散和生长方式&#xff0c;以寻找复杂问题的最优解。以下是苔藓生长优化算法的一些基…

如何清空回收站后在 Windows 11/10 中恢复已删除的文件

这篇文章将解释如何将已删除的文件、文件夹和其他项目从回收站还原或恢复到原始位置。有时&#xff0c;我们最终会删除重要的文件和文件夹&#xff0c;然后我们不知道如何将它们恢复到原来的位置。但是您不必担心&#xff0c;因为这篇针对初学者的帖子将详细指导您完成所有步骤…

JDK下载与IDEA环境配置

JDK下载与IDEA环境配置 前言 ​ 国庆过后新生也是正式进入小组学习了&#xff0c;我们组有一个学Java的&#xff0c;在使用IDEA时遇到了一些问题&#xff0c;输出会乱码&#xff0c;那这一看肯定是字符集出了问题&#xff0c;但是我看IDEA配置的字符集没有什么问题&#xff0…

第三版大气痕量分子光谱(ATMOS)2 级产品,包含垂直势温(θ)网格上的痕量气体

目录 简介 摘要 代码 引用 网址推荐 0代码在线构建地图应用 机器学习 ATMOS L2 Trace Gases on Potential Temperature Grid, Tab Delimited Format V3 (ATMOSL2TT) at GES DISC 简介 这是第三版大气痕量分子光谱&#xff08;ATMOS&#xff09;2 级产品&#xff0c;包…

电阻分压电路:【图文讲解】

在电子电路中&#xff0c;电阻同样发挥着重要作用&#xff0c;同时也是一个最基本的元器件&#xff0c;电阻在电路中可以起到限流、分流、分压、发热的作用。 本节&#xff0c;我们重点来聊聊电阻的分压电路。如下图&#xff0c;是一个经典的电阻分压电路。 1&#xff1a;电路…

【AAOS】Android Automotive 15模拟器源码下载及编译

源码下载 repo init -u https://android.googlesource.com/platform/manifest -b android-10.0.0_r47 repo sync -c --no-tags --no-clone-bundle 源码编译 source build/envsetup.sh lunch aosp_car_x86_64-userdebug make -j8 运行效果 emualtor Home All apps Setting…

TDD(测试驱动开发)是否已死?

Rails 大神、创始人 David Heinemeier Hansson 曾发文抨击TDD。 TDD is dead. Long live testing. (DHH) 此后, Kent Beck、Martin Fowler、David Hansson 三人就这个观点还举行了系列对话&#xff08;辩论&#xff09; Is TDD Dead? 笔者作为一个多年在软件测试领域摸索的人&…

从秒级到小时级:TikTok等发布首篇面向长视频理解的多模态大语言模型全面综述

文章链接&#xff1a;https://arxiv.org/pdf/2409.18938 亮点直击 追踪并总结从图像理解到长视频理解的MM-LLMs的进展;回顾了各种视觉理解任务之间的差异&#xff0c;并强调了长视频理解中的挑战&#xff0c;包括更细粒度的时空细节、动态事件和长期依赖性;详细总结了MM-LLMs在…

整合 Knife4j:提升接口调试效率

整合 Knife4j&#xff1a;提升接口调试效率 Knife4j 是什么&#xff1f; Knife4j 是一个为 Java 项目生成和管理 API 文档的工具。实际上&#xff0c;它是 Swagger UI 的一个增强工具集&#xff0c;旨在让 Swagger 生成的 API 文档更优雅、更强大。 Knife4j 主要功能 美观的…

【LeetCode】动态规划—96. 不同的二叉搜索树(附完整Python/C++代码)

动态规划—96. 不同的二叉搜索树 题目描述前言基本思路1. 问题定义2. 理解问题和递推关系二叉搜索树的性质&#xff1a;核心思路&#xff1a;状态定义&#xff1a;状态转移方程&#xff1a;边界条件&#xff1a; 3. 解决方法动态规划方法&#xff1a;伪代码&#xff1a; 4. 进一…

计算机毕业设计 内蒙古旅游景点数据分析系统的设计与实现 Python毕业设计 Python毕业设计选题 Spark 大数据【附源码+安装调试】

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

FreeRTOS——剖析静态创建任务内部实现

静态创建任务函数 TaskHandle_t xTaskCreateStatic (TaskFunction_t pxTaskCode, /*指向任务函数的指针*/const char *const pcName, /*任务函数名*/const uint32_t ulStackDepth, /*任务堆栈大小注意字为单位*/void *const pvParameters, /*传递的任务函…

数据处理中常见的归一化方法有哪些?为什么要对数据进行归一化?

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; &#x1f50d;【大厂面试真题】系列&#xff0c;带你攻克大厂面试真题&#xff0c;秒变offer收割机&#xff01; ❓今日问题&am…

Qt-系统QThread多线程介绍使用(62)

目录 描述 相关函数 使用 准备工作 重写run 发送信号 创建一个线程 启动线程 计时器运行流程 多线程运用场景 描述 qt多线程和Linux多线程类似 Linux有自己的一套多线程 API&#xff0c;Qt 也有着自己封装的多线程 API QT多线程参考了JAVA中的设计方式 QThread创建…

总结ES6—ES13新特性

目录 ES6let/const不同特性共同特性不能重复声明作用域提升问题暂时性死区&#xff08; temporal dead zone&#xff09;不添加window形成块级作用域 三者区别 模板字符串解构赋值数组的解构对象的解构 默认参数箭头函数展开运算符数值表示SymbolSetWeakSetMapWeakMapProxy 和 …

Linux Ubuntu dbus CAPI ---- #include<dbus.h>出现“无法打开源文件dbus/xxx.h“的问题

一、确保已安装dbus库和CAPI sudo apt-get install libdbus-1-dev 二、在c_cpp_properties.json的includePath中是否配置了dbus库依赖文件所在的路径 三、编译一个简单的dbus代码&#xff0c;在编译过程中只要出现.h文件找不到的情况&#xff0c;就使用下列命令找到.h文件路径…

【2024最新】基于springboot+vue的体质数据分析及可视化lw+ppt

作者&#xff1a;计算机搬砖家 开发技术&#xff1a;SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;Java精选实战项…

【设计模式】揭秘Spring框架:设计模式如何驱动代码重用与扩展性的最佳实践

作者&#xff1a;后端小肥肠 &#x1f347; 我写过的文章中的相关代码放到了gitee&#xff0c;地址&#xff1a;xfc-fdw-cloud: 公共解决方案 &#x1f34a; 有疑问可私信或评论区联系我。 &#x1f951; 创作不易未经允许严禁转载。 姊妹篇&#xff1a; 【设计模式】万字详解…