这篇文章主要介绍“如何使用JavaScript实现一个拖拽缩放效果”，在日常操作中，相信很多人在如何使用JavaScript实现一个拖拽缩放效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用JavaScript实现一个拖拽缩放效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
前言
先来看一下我们要是实现一个怎样的效果
基本思路
鼠标摁下，记录元素的初始位置以及宽高
监听鼠标的移动，根据鼠标的移动不断改变自己的位置/宽高
是否存在边界限制
拖拽实现
我们常见的改变元素位置的方式有
定位
使用translate进行偏移
那我们现在用那种方式那实现拖拽呢？
从功能实现上来看，这两个方式都能很好的实现我们的需求
从性能上来看，translate天生就是用来制作动画效果的，所以translate的性能以及流畅度都是要优于定位的。
开始操作！！
<style> .box{ margin: 50px; width: 500px; height: 300px; border: 1px solid black; position: relative; } .drag{ height: 100px; width: 100px; background-color: #cbd; }</style><div class="box"> <div class="drag"></div></div><script> let dragEl = document.querySelector(".drag") let container = document.querySelector(".box") let width, height, maxWidth, maxHeight, tx, ty, startX, startY // 初始化 function init() { // 为目标元素设置初始的偏移，避免在第一次获取偏移时为空的问题 dragEl.style.transform = "translate(0px,0px)" // 获取父元素宽高 maxWidth = container.clientWidth maxHeight = container.clientHeight } function getInfo(e) { // 获取元素当前的宽高 width = dragEl.clientWidth height = dragEl.clientHeight // 获取元素当前的偏移量 let translateStr = dragEl.style.transform const reg = /\d+/g let translateArr = translateStr.match(reg) tx = Number(translateArr[0]) ty = Number(translateArr[1]) // 记录鼠标的起始位置 startX = e.clientX startY = e.clientY } function drag() { dragEl.addEventListener("mousedown", (e) => { getInfo(e) document.onmousemove = (e) => { let distanceX = tx + e.clientX - startX let distanceY = ty + e.clientY - startY dragEl.style.transform = `translate(${distanceX}px, ${distanceY}px)` } document.onmouseup = () => { document.onmousemove = null } }) } init() drag()</script>通过上述代码，我们已经完成了元素的拖动，接下来需要考虑的就是，如果有边界限制，我们又该如何实现
从上诉例子中，我们可以观察出，元素偏移的最小值为0，最大值为父元素的宽高 - 目标元素的宽高
所以在有边界限制的情形下偏移量的计算方式为
let distanceX = Math.max(0, Math.min(tx + e.clientX - startX, maxWidth - width))let distanceY = Math.max(0, Math.min(ty + e.clientY - startY, maxHeight - height))缩放实现
这里我们以向左缩放为例
首先我们需要为目标元素添加一个边框，用来进行缩放的操作
<style> .box{ margin: 50px; width: 500px; height: 300px; border: 1px solid black; position: relative; } .drag{ height: 100px; width: 100px; background-color: #cbd; } .left{ width: 10px; height: calc(100% - 14px); margin: 7px 0px; position: absolute; background-color: #000; cursor: col-resize; top: 0; left: -5px; }</style><script>function addLeft() { left = document.createElement("div") left.className = "left" dragEl.append(left)}init()drag()addLeft()</script>为左侧的边框添加缩放功能，因为是左侧的缩放，所以在宽度变化的同时，需要不断调整元素的位置，令其符合视觉效果
function leftZoom() { left.addEventListener("mousedown", (e) => { e.stopPropagation() getInfo(e) document.onmousemove = (e) => { // 注意这里是➖ newWidth = width - (e.clientX - startX) let distanceX = tx + (e.clientX - startX) dragEl.style.width = `${newWidth}px` dragEl.style.transform = `translate(${distanceX}px, ${ty}px)` } document.onmouseup = () => { document.onmousemove = null } })}init()drag()addLeft()leftZoom()限制元素缩放的最小值
let minWidth = 30newWidth = Math.max(minWidth, width - (e.clientX - startX))现在我们已经完成了缩放，但是当元素向右缩小到最小值时，元素会向右移动，显然这是不符合逻辑的，所以我们需要对偏移进行限制
// 最大偏移为已经偏移的距离 + 目标元素的宽度 - 最小宽度let distanceX = Math.min(tx + width - minWidth, tx + (e.clientX - startX))如果缩放的尺寸需要限制在父元素内，我们需要继续完善代码
// 最大宽度为元素当前偏移量 + 最初的宽度，最小宽度为minWidthnewWidth = Math.min(tx + width, Math.max(minWidth, width - (e.clientX - startX)))// 最大偏移为已经偏移的距离 + 目标元素的宽度 - 最小宽度,最小偏移为0let distanceX = Math.max(0,Math.min(tx + width - minWidth, tx + (e.clientX - startX)))到此，关于“如何使用JavaScript实现一个拖拽缩放效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
