如何使用JavaScript实现一个拖拽缩放效果

这篇文章主要介绍“如何使用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实现一个拖拽缩放效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！