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

这篇文章主要介绍“如何使用JavaScript实现一个拖拽缩放效果”，在日常操作中，相信很多人在如何使用JavaScript实现一个拖拽缩放效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用JavaScript实现一个拖拽缩放效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

前言

先来看一下我们要是实现一个怎样的效果

基本思路

• 鼠标摁下，记录元素的初始位置以及宽高

• 监听鼠标的移动，根据鼠标的移动不断改变自己的位置/宽高

• 是否存在边界限制

拖拽实现

我们常见的改变元素位置的方式有

• 定位

• 使用translate进行偏移

那我们现在用那种方式那实现拖拽呢？
从功能实现上来看，这两个方式都能很好的实现我们的需求
从性能上来看，translate天生就是用来制作动画效果的，所以translate的性能以及流畅度都是要优于定位的。
开始操作！！

<style>.box{margin:50px;width:500px;height:300px;border:1pxsolidblack;position:relative;}.drag{height:100px;width:100px;background-color:#cbd;}</style><divclass="box"><divclass="drag"></div></div><script>letdragEl=document.querySelector(".drag")letcontainer=document.querySelector(".box")letwidth,height,maxWidth,maxHeight,tx,ty,startX,startY//初始化functioninit(){//为目标元素设置初始的偏移，避免在第一次获取偏移时为空的问题dragEl.style.transform="translate(0px,0px)"//获取父元素宽高maxWidth=container.clientWidthmaxHeight=container.clientHeight}functiongetInfo(e){//获取元素当前的宽高width=dragEl.clientWidthheight=dragEl.clientHeight//获取元素当前的偏移量lettranslateStr=dragEl.style.transformconstreg=/\d+/glettranslateArr=translateStr.match(reg)tx=Number(translateArr[0])ty=Number(translateArr[1])//记录鼠标的起始位置startX=e.clientXstartY=e.clientY}functiondrag(){dragEl.addEventListener("mousedown",(e)=>{getInfo(e)document.onmousemove=(e)=>{letdistanceX=tx+e.clientX-startXletdistanceY=ty+e.clientY-startYdragEl.style.transform=`translate(${distanceX}px,${distanceY}px)`}document.onmouseup=()=>{document.onmousemove=null}})}init()drag()</script>

通过上述代码，我们已经完成了元素的拖动，接下来需要考虑的就是，如果有边界限制，我们又该如何实现
从上诉例子中，我们可以观察出，元素偏移的最小值为0，最大值为父元素的宽高 - 目标元素的宽高
所以在有边界限制的情形下偏移量的计算方式为

letdistanceX=Math.max(0,Math.min(tx+e.clientX-startX,maxWidth-width))letdistanceY=Math.max(0,Math.min(ty+e.clientY-startY,maxHeight-height))

缩放实现

这里我们以向左缩放为例

• 首先我们需要为目标元素添加一个边框，用来进行缩放的操作

<style>.box{margin:50px;width:500px;height:300px;border:1pxsolidblack;position:relative;}.drag{height:100px;width:100px;background-color:#cbd;}.left{width:10px;height:calc(100%-14px);margin:7px0px;position:absolute;background-color:#000;cursor:col-resize;top:0;left:-5px;}</style><script>functionaddLeft(){left=document.createElement("div")left.className="left"dragEl.append(left)}init()drag()addLeft()</script>

2.为左侧的边框添加缩放功能，因为是左侧的缩放，所以在宽度变化的同时，需要不断调整元素的位置，令其符合视觉效果

functionleftZoom(){left.addEventListener("mousedown",(e)=>{e.stopPropagation()getInfo(e)document.onmousemove=(e)=>{//注意这里是?newWidth=width-(e.clientX-startX)letdistanceX=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()

• 限制元素缩放的最小值

letminWidth=30newWidth=Math.max(minWidth,width-(e.clientX-startX))

• 现在我们已经完成了缩放，但是当元素向右缩小到最小值时，元素会向右移动，显然这是不符合逻辑的，所以我们需要对偏移进行限制

//最大偏移为已经偏移的距离+目标元素的宽度-最小宽度letdistanceX=Math.min(tx+width-minWidth,tx+(e.clientX-startX))

4.如果缩放的尺寸需要限制在父元素内，我们需要继续完善代码

//最大宽度为元素当前偏移量+最初的宽度，最小宽度为minWidthnewWidth=Math.min(tx+width,Math.max(minWidth,width-(e.clientX-startX)))//最大偏移为已经偏移的距离+目标元素的宽度-最小宽度,最小偏移为0letdistanceX=Math.max(0,Math.min(tx+width-minWidth,tx+(e.clientX-startX)))

到此，关于“如何使用JavaScript实现一个拖拽缩放效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注主机评测网网站，小编会继续努力为大家带来更多实用的文章！

上一篇：python区块链简易版交易完善挖矿奖励怎么实现

下一篇：怎么用Python实现单向链表

---