JS-拖拽位移、放大缩小

对同一盒子拖拽位移、缩放,这其实是不符合js的逻辑的,位移和拖拽必然会互相影响,所以需要在布局上略加调整
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .resize-box {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50px;
      top: 50px;
      cursor: move;
      background-color: #ccc;
      border: 1px solid #000;
    }
    .resize {
      width: 20px;
      height: 20px;
      background-color: #000;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 100;
      cursor: se-resize;
    }
  </style>
</head>
<body>
<div class="resize-box">
  <div class="resize"></div>
</div>
<script>
  const resizeBox = document.querySelector('.resize-box');
  const resize = document.querySelector('.resize');
  let isResizing = false;
  let startX, startY, startWidth, startHeight;
  resize.onmousedown = function(e) {
    preventFun(e);
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(getComputedStyle(resizeBox).width, 10);
    startHeight = parseInt(getComputedStyle(resizeBox).height, 10);

    document.onmousemove = function(e) {
      preventFun(e);
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;
      resizeBox.style.width = (startWidth + deltaX) + 'px';
      resizeBox.style.height = (startHeight + deltaY) + 'px';
    };
    document.onmouseup = closeDragElement;
  };

  function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;
    function dragMouseDown(e) {
      preventFun(e);
      e.preventDefault();
      e = e || window.event;
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmousemove = elementDrag;
      document.onmouseup = closeDragElement;
    }

    function elementDrag(e) {
      preventFun(e);
      e = e || window.event;
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }

  dragElement(resizeBox);

  function preventFun(e) {
    // 阻止默认事件
    e.preventDefault();
    e.returnValue;
    // 阻止冒泡
    if (e && e.stopPropagatio) {
      e.stopPropagation();
    } else {
      window.event.cancelBubble = true;
    }
  }

</script>
</body>
</html>

位移还是通过自身来实现,缩放则是通过加一个盒子间接操作,这样互相之间不会冲突,当然还要加上去除冒泡 和 默认事件,这样就可以了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记:【QC】Android Q : telephony-phone 模块

一、phone init 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以放大看】 二、phone MO 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以放大看】 三、phone MT 流程图 高清的流程图参考&#xff1a;【高清图&#xff0c;保存后可以…

json返回工具类|世界协调时间(UTC)

一、问题 世界协调时间&#xff08;UTC&#xff09;是一个标准的时间参考&#xff0c;通常被用于跨越不同时区的时间标准。要将 UTC 时间转换为中国时间&#xff08;中国标准时间&#xff09;&#xff0c;你需要将时间加上8个小时&#xff0c;因为中国位于 UTC8 时区。 初中知…

智慧手术室手麻系统源码,C#手术麻醉临床信息系统源码,符合三级甲等医院评审要求

手麻系统全套源码&#xff0c;C#手术麻醉系统源码&#xff0c;支持二次开发&#xff0c;授权后可商用。 手术麻醉临床信息系统功能符合三级甲等医院评审要求&#xff0c;实现与医院现有信息系统如HIS、LIS、PACS、EMR等系统全面对接&#xff0c;全面覆盖从患者入院&#xff0c;…

占道经营监测识别摄像机

随着城市化进程的加速和商业活动的不断增加&#xff0c;城市道路上的占道经营现象也变得越来越普遍。为了规范市容市貌、维护交通秩序和保障市民的出行安全&#xff0c;一种名为占道经营监测识别摄像机应运而生&#xff0c;成为城市管理的有效辅助工具。这种占道经营监测识别摄…

一键复制:基于vue实现的tab切换效果

需求&#xff1a;顶部栏有切换功能&#xff0c;内容区域随顶部切换而变化 目录 实现效果实现代码使用示例在线预览 实现效果 如下 实现代码 组件代码 MoTab.vue <template><div class"mo-tab"><divv-for"item in options"class"m…

地图位置的二维码怎么做?在线制作地图二维码的方法

怎么定位一个位置做成二维码呢&#xff1f;随着互联网的不断发展&#xff0c;现在通过扫描二维码来获取导航位置的方式有很多的场景都在应用。这种方式的好处在于其他人都可以通过这个二维码来获取位置&#xff0c;有利于分享。 导航地图二维码可以在电脑的二维码生成器上快速…

教练预约管理小程序开发源码现成案例(小程序、APP、H5圆源码搭建)

随着人们对身体健康越来越重视&#xff0c;对强身健体、健康个性化生活的需求日益增加&#xff0c;健身已成为时尚生活的标志。 然而&#xff0c;没有时间去健身房却成了很多上班族的痛点。健身房作为一项既能缓解工作压力又能缓解学业压力的运动&#xff0c;正好满足了当代人…

C++:map和set类

关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque、 forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面 存储的是元素本身。那什么是关…

《intel开发手册卷1》学习笔记2

1、栈 堆栈&#xff08;见图 6-1&#xff09;是一个连续的内存位置数组。它包含在一个段中&#xff0c;并由 SS 寄存器中的段选择器标识。使用平面内存模型时&#xff0c;堆栈可以位于程序线性地址空间中的任何位置。堆栈最长可达 4 GB&#xff0c;这是段的最大大小。 使用 P…

js原型链与继承笔记

前置阅读&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain js中的“类”是一个函数。function test() {}中&#xff0c;test是由Function生成的。prototype与__proto__的区别&#xff1a; 前者是js函数&#xff08;C…

拔牙护理:让孩子轻松迎接新牙成长的注意事项

引言&#xff1a; 拔牙是儿童成长过程中常见的一环&#xff0c;正确的护理和注意事项对孩子的口腔健康至关重要。本文将详细介绍儿童拔牙的注意事项&#xff0c;帮助家长们更好地照顾孩子的口腔健康。 1. 拔牙前的准备&#xff1a; 在拔牙前&#xff0c;家长应当向孩子解释拔牙…

Unity打开安卓设备不同的设置面板

1&#xff0c;打开安卓设备不同的设置面板&#xff0c;我还贴心的把Android官网的链接放下面了 2&#xff0c;使用也很方便&#xff1a;unity按钮事件上拖这个脚本&#xff0c;注册MyOpenAndroidSettings方法&#xff0c;参数 填 和枚举值相应的数字 // 功能&#xff1a;打开…

试用NXP官方的UDS bootloader

文章目录 1.前言2.资料获取2.1 MCU例程 2.2 开发环境2.3 上位机2.4 硬件 3.工程修改3.1 boot工程修改 3.2 app工程修改4.测试情况5.例程分享 1.前言 最近很多客户在开发S32K系列MCU时咨询是否可以提供基于UDS协议的bootloader。本文以S32K144为例&#xff0c;介绍如何使用NXP官…

MySQL——系统变量

使用 #最大连接用户数 select MAX_CONNECTIONS; #临时存放构成每次事务的SQL的缓冲区长度 select BINLOG_CACHE_SIZE; #SQL Server的版本信息 select VERSION; 查询结果

云原生测试实战-云计算大数据云原生架构容器技术Kubernetes计算机软件工程软件开发

系列文章目录 送书第一期 《用户画像&#xff1a;平台构建与业务实践》 送书活动之抽奖工具的打造 《获取博客评论用户抽取幸运中奖者》 送书第二期 《Spring Cloud Alibaba核心技术与实战案例》 送书第三期 《深入浅出Java虚拟机》 送书第四期 《AI时代项目经理成长之道》 …

政安晨:【Keras机器学习示例演绎】(三十六)—— 用聚合注意力增强信念网络

目录 导言 设置和导入 超参数 加载 CIFAR10 数据集 增强层 卷积干 卷积主干 注意力汇集 Patch convnet 回调 学习率时间表 训练 推理 结论 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望…

Linux-02

Linux常用命令&#xff1a; ls: 列出目录touch: 创建文件 touch test.txt echo:往文件写内容echo "i love linux" >>test.txtcd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录 mkdir dai:创建目录dai mkdir -p test1/t…

Isaac Sim 6 仅使用isaacsim中自带的工具进行语义分割、实例分割(学习笔记5.09)

一.概要 建立场景&#xff0c;给场景内的物体赋予语义&#xff0c;使用Replicator进行分割操作&#xff0c;从而获得带标签信息的mask掩码图&#xff0c;可作为数据集、验证集等训练使用。 二.具体操作步骤 场景部分 1.搭建一个基础场景 这里建议在搭建的时候就按类别分好类…

L2TP-VPN 专题笔记

笔记连接: 有道云笔记https://note.youdao.com/s/EJBaLwhS 思维导图:

鸿蒙OpenHarmony开发板解析:【 部件配置规则】

部件 部件配置规则 部件的bundle.json放在部件源码的根目录下。以泛sensor子系统的sensor服务部件为例&#xff0c;部件属性定义描述文件字段说明如下&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击…