怎么写一个可以拖拽缩放的div？

news2024/12/24 3:37:50

说在前面

元素拖拽和缩放现在也是一个很常见的功能，让我们从实现div元素的拖拽缩放开始来了解元素拖拽缩放的具体原理和实现方法吧。

效果展示

AI改图-Document - Google Chrome 2023-09-26 22-50-31-720x382.gif

AI改图-Document - Google Chrome 2023-09-26 22-55-50-720x382.gif

实现步骤

画一个div

首先我们需要先画一个div，并给它8个方位（上、下、左、右、左上、右上、右下、左下）加上缩放锚点，我们可以通过这几个锚点来对div进行缩放，具体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="box" id="drag">
      <div class="resize-handle top-left"></div>
      <div class="resize-handle top"></div>
      <div class="resize-handle top-right"></div>
      <div class="resize-handle right"></div>
      <div class="resize-handle bottom-right"></div>
      <div class="resize-handle bottom"></div>
      <div class="resize-handle bottom-left"></div>
      <div class="resize-handle left"></div>
    </div>
  </body>
  <script src="./index.js"></script>
</html>

加点css

将锚点定位到其特定的位置上，并设置不同的鼠标指示效果，具体代码如下：

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  cursor: move;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
}

.top-left {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.top {
  top: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}

.top-right {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.right {
  top: calc(50% - 5px);
  right: -5px;
  cursor: ew-resize;
}

.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.bottom {
  bottom: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}

.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}

.left {
  top: calc(50% - 5px);
  left: -5px;
  cursor: ew-resize;
}

效果是这样的：

image.png

完成拖拽和缩放功能

拖拽功能

我们需要鼠标在div内按下不松开的时候，div可以跟着鼠标的位置移动，这里我们可以从鼠标的三种事件的触发来入手：

  • 1、鼠标按下（mousedown）

首先我们需要监听鼠标按下事件。

const dragElement = document.getElementById("drag");
dragElement.addEventListener("mousedown", startDrag);

判断点击事件是否为锚点触发，是的话则不执行拖拽逻辑。这里我们可以通过样式名来判断，锚点我们都给它加上了resize-handle，我们只需要判断样式名是否包含resize-handle就可以。

function startDrag(event) {
  event.preventDefault();
  const currentHandle = event.target;
  const isResizeHandle = currentHandle.className.includes("resize-handle");
  if (isResizeHandle) return;
}

记录下鼠标点击的坐标及拖拽元素所在位置，用于后面计算鼠标移动距离和对拖拽元素进行移动，监听鼠标移动和抬起事件

  const startX = event.clientX;
  const startY = event.clientY;
  const startLeft = dragElement.offsetLeft;
  const startTop = dragElement.offsetTop;
  document.addEventListener("mousemove", drag);
  document.addEventListener("mouseup", stopDrag);
  • 2、鼠标移动（mousemove）

鼠标移动的时候计算鼠标当前位置与鼠标点击位置的相对距离，将拖拽元素的位置也移动相应的相对距离

function drag(event) {
  const dx = event.clientX - startX;
  const dy = event.clientY - startY;
  const newLeft = startLeft + dx;
  const newTop = startTop + dy;
  dragElement.style.left = newLeft + "px";
  dragElement.style.top = newTop + "px";
}
  • 3、鼠标抬起（mouseup）

鼠标抬起的时候将鼠标移动和鼠标抬起的监听事件移除。

function stopDrag() {
  document.removeEventListener("mousemove", drag);
  document.removeEventListener("mouseup", stopDrag);
}

到这里我们就完成了一个最基本的可拖拽元素了，接下来就该来实现缩放功能了。

缩放功能

我们希望在点击缩放锚点进行移动的时候，元素会随着鼠标继续缩小或放大，这里我们仍然是要从鼠标触发的三种事件来入手：

  • 1、鼠标按下（mousedown）

我们需要监听所有锚点的鼠标按下事件，首先我们需要先获取所有的锚点元素:

const resizeHandles = document.getElementsByClassName("resize-handle");

再监听所有锚点元素的鼠标按下事件：

Array.from(resizeHandles).forEach((handle) => {
  handle.addEventListener("mousedown", startResize);
});

记录鼠标按下的初始位置及缩放元素的初始位置和宽高，便于后面对缩放元素进行缩放操作，并为缩放元素加上鼠标移动和鼠标抬起的监听事件。

function startResize(event) {
  event.preventDefault();
  const currentHandle = event.target;
  const direction = currentHandle.className.split(" ")[1];
  startX = event.clientX;
  startY = event.clientY;
  startWidth = dragElement.offsetWidth;
  startHeight = dragElement.offsetHeight;
  startLeft = dragElement.offsetLeft;
  startTop = dragElement.offsetTop;
  document.addEventListener("mousemove", resize);
  document.addEventListener("mouseup", stopResize);
  }
  • 2、鼠标移动（mousemove）

鼠标移动的时候我们需要判断当前是从哪个锚点触发的缩放事件，我们可以从锚点的样式名className来做区分。

const currentHandle = event.target;
const direction = currentHandle.className.split(" ")[1];

不同锚点我们需要对元素进行不同的操作，我们可以分为四个方位来进行判断并区分操作：

(1)左边

判断样式名是否包含left，左边锚点会触发元素的宽度变化及左右位置的变化，这时候鼠标左移相对于元素来说是放大，右移相对于元素来说是缩小，所以元素的宽度应该减去鼠标的位移距离。

if (direction.includes("left")) {
  width = startWidth - dx + "px";
  left = startLeft + dx / 2 + "px";
}

(2)右边

判断样式名是否包含right，右边锚点会触发元素的宽度变化及左右位置的变化，这时候鼠标左移相对于元素来说是缩小，右移相对于元素来说是放大，所以元素的宽度应该加上鼠标的位移距离。

if (direction.includes("right")) {
  width = startWidth + dx + "px";
  left = startLeft + dx / 2 + "px";
}

(3)上边

判断样式名是否包含top，上边锚点会触发元素的高度变化及上下位置的变化，这时候鼠标上移相对于元素来说是放大，下移相对于元素来说是缩小，所以元素的高度应该减去鼠标的位移距离。

if (direction.includes("top")) {
  height = startHeight - dy + "px";
  top = startTop + dy / 2 + "px";
}

(4)下边

判断样式名是否包含bottom，下边锚点会触发元素的高度变化及上下位置的变化，这时候鼠标上移相对于元素来说是缩小，下移相对于元素来说是放大，所以元素的高度应该加上鼠标的位移距离。

if (direction.includes("bottom")) {
  height = startHeight + dy + "px";
  top = startTop + dy / 2 + "px";
}

我们还需要判断当前元素的宽度和高度是否小于等于0，等于0的时候我们不再对其进行缩放操作，大于0则对元素进行赋值操作。

if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
dragElement.style.width = width;
dragElement.style.height = height;
dragElement.style.left = left;
dragElement.style.top = top;

完整代码如下：

function resize(event) {
    const dx = event.clientX - startX;
    const dy = event.clientY - startY;
    let width = startWidth,
      height = startHeight,
      left = startLeft,
      top = startTop;
    if (direction.includes("left")) {
      width = startWidth - dx + "px";
      left = startLeft + dx / 2 + "px";
    }
    if (direction.includes("right")) {
      width = startWidth + dx + "px";
      left = startLeft + dx / 2 + "px";
    }
    if (direction.includes("top")) {
      height = startHeight - dy + "px";
      top = startTop + dy / 2 + "px";
    }
    if (direction.includes("bottom")) {
      height = startHeight + dy + "px";
      top = startTop + dy / 2 + "px";
    }
    if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
    dragElement.style.width = width;
    dragElement.style.height = height;
    dragElement.style.left = left;
    dragElement.style.top = top;
}
  • 3、鼠标抬起（mouseup）

鼠标抬起的时候将鼠标移动和鼠标抬起的监听事件移除。

function stopResize() {
    document.removeEventListener("mousemove", resize);
    document.removeEventListener("mouseup", stopResize);
}

到这里我们就完成了一个最基本的可拖拽缩放的元素了。

完整代码

完整的JavaScrip代码如下：

const dragElement = document.getElementById("drag");
// 拖拽功能
dragElement.addEventListener("mousedown", startDrag);
function startDrag(event) {
  event.preventDefault();
  const currentHandle = event.target;
  const isResizeHandle = currentHandle.className.includes("resize-handle");
  if (isResizeHandle) return;
  const startX = event.clientX;
  const startY = event.clientY;
  const startLeft = dragElement.offsetLeft;
  const startTop = dragElement.offsetTop;
  document.addEventListener("mousemove", drag);
  document.addEventListener("mouseup", stopDrag);
  function drag(event) {
    const dx = event.clientX - startX;
    const dy = event.clientY - startY;
    const newLeft = startLeft + dx;
    const newTop = startTop + dy;
    dragElement.style.left = newLeft + "px";
    dragElement.style.top = newTop + "px";
  }
  function stopDrag() {
    document.removeEventListener("mousemove", drag);
    document.removeEventListener("mouseup", stopDrag);
  }
}
// 缩放功能
const resizeHandles = document.getElementsByClassName("resize-handle");
Array.from(resizeHandles).forEach((handle) => {
  handle.addEventListener("mousedown", startResize);
});

function startResize(event) {
  event.preventDefault();
  const currentHandle = event.target;
  const direction = currentHandle.className.split(" ")[1];
  const startX = event.clientX;
  const startY = event.clientY;
  const startWidth = dragElement.offsetWidth;
  const startHeight = dragElement.offsetHeight;
  const startLeft = dragElement.offsetLeft;
  const startTop = dragElement.offsetTop;
  document.addEventListener("mousemove", resize);
  document.addEventListener("mouseup", stopResize);
  function resize(event) {
    const dx = event.clientX - startX;
    const dy = event.clientY - startY;
    let width = startWidth,
      height = startHeight,
      left = startLeft,
      top = startTop;
    if (direction.includes("left")) {
      width = startWidth - dx + "px";
      left = startLeft + dx / 2 + "px";
    }
    if (direction.includes("right")) {
      width = startWidth + dx + "px";
      left = startLeft + dx / 2 + "px";
    }
    if (direction.includes("top")) {
      height = startHeight - dy + "px";
      top = startTop + dy / 2 + "px";
    }
    if (direction.includes("bottom")) {
      height = startHeight + dy + "px";
      top = startTop + dy / 2 + "px";
    }
    if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
    dragElement.style.width = width;
    dragElement.style.height = height;
    dragElement.style.left = left;
    dragElement.style.top = top;
  }
  function stopResize() {
    document.removeEventListener("mousemove", resize);
    document.removeEventListener("mouseup", stopResize);
  }
}

公众号

https://mp.weixin.qq.com/s/er7u4bzWvnu_JZUbc6i0fA

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

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

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

相关文章

Linux学习之HIS部署(5)

Linux学习之HIS部署(5)

MySQL部署 #安装MySQL服务 [rootServices ~]# yum clean all; yum repolist -v ... Total packages: 8,265 [rootServices ~]# yum -y install mysql.x86_64 mysql-server.x86_64 mysql-devel.x86_64 ... Complete! [rootServices ~]# #启动MySQL服务 [rootServices ~]# syst…
阅读更多...
【数据库——MySQL】（8）表数据插入、修改和删除练习及讲解

【数据库——MySQL】（8）表数据插入、修改和删除练习及讲解

目录 1. 题目2. 解答 1. 题目 建立的数据库 YGGL&#xff0c;向库中的 3 个表中插入多行数据记录&#xff0c;然后修改和删除一些记录。 根据下表的样本数据&#xff0c;使用 SQL 语句向 Departments 表中插入数据。 使用 SQL 语句向 Employees 表中插入前 6 条数据。 使用…
阅读更多...
Android SeekBar使用避坑指南

Android SeekBar使用避坑指南

这里写自定义目录标题 SeekBar简介问题1.纵向进度条问题2.SeekBar间隙问题3.SeekBar高度设置不生效 SeekBar简介 SeekBar是Android原生UI组件&#xff0c;可以用来调节进度&#xff0c;广泛应用于音乐、视频进度展示调控、音量、亮度调节等功能里。 SeekBar的使用很简单&…
阅读更多...
【MySQL】数据类型（一）

【MySQL】数据类型（一）

文章目录 前言一. tinyint等整型二. bit位字段类型三. float浮点型四. decimal浮点型结束语 前言 MySQL也有数据类型&#xff0c;其中一些与C/C/Java是一样的&#xff0c;但也有一些数据类型不同&#xff0c;更有新的独有的数据类型 一. tinyint等整型 MySQL将整型按照字节分成…
阅读更多...
leetcode 33. 搜索旋转排序数组

leetcode 33. 搜索旋转排序数组

2023.9.26 本题暴力法可以直接A&#xff0c;但是题目要求用log n的解法。 可以想到二分法&#xff0c;但是一般二分法适用于有序数组的&#xff0c;这里的数组只是部分有序&#xff0c;还能用二分法吗&#xff1f; 答案是可以的。因为数组是经过有序数组旋转得来的&#xff0c;…
阅读更多...
Ae 效果：CC Split、CC Split 2

Ae 效果：CC Split、CC Split 2

扭曲/CC Split Distort/CC Split CC Split &#xff08;CC 分割&#xff09;主要用于将图像在指定的两点之间进行分割&#xff0c;可以创造出独特的图像分割效果。 ◆ ◆ ◆ CC Split 效果属性说明 Point A 点 A 用于设置分割线的起始点位置。 可手动在查看器面板上拖动来改变…
阅读更多...
Linux 线程同步（重要） 互斥量

Linux 线程同步（重要） 互斥量

/*三个窗口卖一百张票 */#include<stdio.h> #include<unistd.h> #include<pthread.h> #include<string.h> int tickets 0; void * sellticket(void * arg) {//卖票usleep(7000);while(tickets < 100) {printf("%ld 正在卖第 %d 张票\n",…
阅读更多...
linux使用操作[3]

linux使用操作[3]

文章目录 版权声明环境变量$符号自行设置环境变量 上传、下载rz、sz命令 压缩、解压tar命令压缩tar解压zip 命令压缩文件unzip 命令解压文件 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&#xff0c;所有版权属于黑马程序员或相关权利人…
阅读更多...
什么是物联网智慧公厕？

什么是物联网智慧公厕？

在当今科技快速发展的背景下&#xff0c;具备全感知、可靠传输、智能处理三大特点的物联网技术&#xff0c;正逐渐渗透到各个领域。而智慧公厕作为其中的一个创新应用&#xff0c;正逐渐受到市场的关注和重视。 什么是物联网智慧公厕&#xff1f;物联网智慧公厕是指通过物联网…
阅读更多...
图像采集卡在应用程序的重要性概述

图像采集卡在应用程序的重要性概述

达到最大吞吐量是工业和工厂自动化的关键标准之一。提高传感器分辨率和帧速率有助于实现目标&#xff0c;但会限制带宽&#xff0c;并带来新的传输问题。图像采集卡是将相机连接到PC的最方便、最可靠的方式&#xff0c;在工业环境中使用图像采集卡为高速应用带来了特定的好处&a…
阅读更多...
MySQL 内部组件结构以及SQL执行逻辑

MySQL 内部组件结构以及SQL执行逻辑

目录 一、MySQL的的内部组件结构二、连接器三、查询缓存四、分析器五、优化器六、执行器 一、MySQL的的内部组件结构 Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数 &#xff08;如…
阅读更多...
接口自动化测试思路和实战(4)：数据驱动测试框架

接口自动化测试思路和实战(4)：数据驱动测试框架

目录 数据驱动测试框架 步骤1、在项目根目录下新建conf文件夹&#xff0c;在下面新建config.ini文件 步骤2、在common的py文件夹下新建ini_file_utils.py文件 步骤3&#xff0c;重写local_config.py文件&#xff0c;封装读取ini文件中的值 步骤4、修改common_function.py文…
阅读更多...
基于微信小程序的火锅店点餐订餐系统设计与实现(源码+lw+部署文档+讲解等)

基于微信小程序的火锅店点餐订餐系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…
阅读更多...
MySQL基础篇-约束

MySQL基础篇-约束

目录 1.约束概述 2.分类 3.测试user表的约束情况 主键约束 非空约束及唯一约束 检查约束 默认约束 4.外键约束 外键约束的语法 外键约束的删除/更新行为 小结 1.约束概述 MySQL约束&#xff08;Constraints&#xff09;是用于确保表中数据完整性和一致性的规则。它们定…
阅读更多...
“童”趣迎国庆 安全“童”行-柿铺梁坡社区开展迎国庆活动

“童”趣迎国庆 安全“童”行-柿铺梁坡社区开展迎国庆活动

“金秋十月好心境&#xff0c;举国欢腾迎国庆。”国庆节来临之际&#xff0c;为进一步加强梁坡社区未成年人爱国主义教育&#xff0c;丰富文化生活&#xff0c;营造热烈喜庆、文明和谐的节日氛围。9月24日上午&#xff0c;樊城区柿铺街道梁坡社区新时代文明实践站联合襄阳市和时…
阅读更多...
借助 ControlNet 生成艺术二维码 – 基于 Stable Diffusion 的 AI 绘画方案

借助 ControlNet 生成艺术二维码 – 基于 Stable Diffusion 的 AI 绘画方案

背景介绍 在过去的数月中&#xff0c;亚马逊云科技已经推出了多篇博文&#xff0c;来介绍如何在亚马逊云科技上部署 Stable Diffusion&#xff0c;或是如何结合 Amazon SageMaker 与 Stable Diffusion 进行模型训练和推理任务。 为了帮助客户快速、安全地在亚马逊云科技上构建、…
阅读更多...
抽象轻松java

抽象轻松java

嗨嗨嗨&#xff01; 没想到吧&#xff0c;出现了抽象轻松第4种语言系列&#xff08;我也没想到&#xff09; 简单的java程序&#xff0c;看完就懂的简单逻辑——购物车系统 购物车&#xff0c;首先要有商品吧&#xff0c;现实中的商品有什么属性&#xff1f; 名字&#xff0…
阅读更多...
JavaSE 基础（十三）网络编程

JavaSE 基础（十三）网络编程

1. 概述 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软件及网络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。 网络编程主要工作是在发…
阅读更多...
基于ModebusRTU通信采集温度湿度项目案例

基于ModebusRTU通信采集温度湿度项目案例

目录 一、模拟温湿度模拟 【1.1】温湿度仪表参数 【1.1】使用电脑模拟传感器 【1.2】使用Codesys软件模拟传感器 二、自定义控件UI设计 【2.1】自定义控件温度湿度柱状设计 ​编辑 【2.1.1】设置温度湿度柱状实际显示【属性】 【2.1.2】设置温度湿度柱状的背景颜色【属…
阅读更多...
工具篇 | Gradle入门与使用指南 - 附Github仓库地址

工具篇 | Gradle入门与使用指南 - 附Github仓库地址

介绍 1.1 什么是Gradle&#xff1f; Gradle是一个开源构建自动化工具&#xff0c;专为大型项目设计。它基于DSL&#xff08;领域特定语言&#xff09;编写&#xff0c;该语言是用Groovy编写的&#xff0c;使得构建脚本更加简洁和强大。Gradle不仅可以构建Java应用程序&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023