温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-05-24 17:24:58 来源:亿速云 阅读:166 作者:iii 栏目:开发技术

这篇文章主要介绍“如何使用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>

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

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 = 30
newWidth = Math.max(minWidth, width - (e.clientX - startX))
  • 现在我们已经完成了缩放,但是当元素向右缩小到最小值时,元素会向右移动,显然这是不符合逻辑的,所以我们需要对偏移进行限制

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

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI