如何使用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實現一個拖拽縮放效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！