第使用JavaScript實(shí)現(xiàn)一個(gè)拖拽縮放效果目錄前言基本思路拖拽實(shí)現(xiàn)縮放實(shí)現(xiàn)最后

前言

在寫一個(gè)簡(jiǎn)單的H5頁(yè)面時(shí)，需要實(shí)現(xiàn)如下的一個(gè)拖拽效果，找了半天未能找到符合要求的，含淚手寫

先來(lái)看一下我們要是實(shí)現(xiàn)一個(gè)怎樣的效果

基本思路

鼠標(biāo)摁下，記錄元素的初始位置以及寬高監(jiān)聽鼠標(biāo)的移動(dòng)，根據(jù)鼠標(biāo)的移動(dòng)不斷改變自己的位置/寬高是否存在邊界限制

拖拽實(shí)現(xiàn)

我們常見的改變?cè)匚恢玫姆绞接?/p>

定位使用translate進(jìn)行偏移

那我們現(xiàn)在用那種方式那實(shí)現(xiàn)拖拽呢？

從功能實(shí)現(xiàn)上來(lái)看，這兩個(gè)方式都能很好的實(shí)現(xiàn)我們的需求

從性能上來(lái)看，translate天生就是用來(lái)制作動(dòng)畫效果的，所以translate的性能以及流暢度都是要優(yōu)于定位的。

開始操作??！

style

.box{

margin:50px;

width:500px;

height:300px;

border:1pxsolidblack;

position:relative;

.drag{

height:100px;

width:100px;

background-color:#cbd;

/style

div

div/div

/div

script

letdragEl=document.querySelector(".drag")

letcontainer=document.querySelector(".box")

letwidth,height,maxWidth,maxHeight,tx,ty,startX,startY

//初始化

functioninit(){

//為目標(biāo)元素設(shè)置初始的偏移，避免在第一次獲取偏移時(shí)為空的問(wèn)題

dragEl.style.transform="translate(0px,0px)"

//獲取父元素寬高

maxWidth=container.clientWidth

maxHeight=container.clientHeight

functiongetInfo(e){

//獲取元素當(dāng)前的寬高

width=dragEl.clientWidth

height=dragEl.clientHeight

//獲取元素當(dāng)前的偏移量

lettranslateStr=dragEl.style.transform

constreg=/\d+/g

lettranslateArr=translateStr.match(reg)

tx=Number(translateArr[0])

ty=Number(translateArr[1])

//記錄鼠標(biāo)的起始位置

startX=e.clientX

startY=e.clientY

functiondrag(){

dragEl.addEventListener("mousedown",(e)={

getInfo(e)

document.onmousemove=(e)={

letdistanceX=tx+e.clientX-startX

letdistanceY=ty+e.clientY-startY

dragEl.style.transform=`translate(${distanceX}px,${distanceY}px)`

document.onmouseup=()={

document.onmousemove=null

init()

drag()

/script

通過(guò)上述代碼，我們已經(jīng)完成了元素的拖動(dòng)，接下來(lái)需要考慮的就是，如果有邊界限制，我們又該如何實(shí)現(xiàn)

從上訴例子中，我們可以觀察出，元素偏移的最小值為0，最大值為父元素的寬高-目標(biāo)元素的寬高

所以在有邊界限制的情形下偏移量的計(jì)算方式為

letdistanceX=Math.max(0,Math.min(tx+e.clientX-startX,maxWidth-width))

letdistanceY=Math.max(0,Math.min(ty+e.clientY-startY,maxHeight-height))

縮放實(shí)現(xiàn)

這里我們以向左縮放為例

首先我們需要為目標(biāo)元素添加一個(gè)邊框，用來(lái)進(jìn)行縮放的操作

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.為左側(cè)的邊框添加縮放功能，因?yàn)槭亲髠?cè)的縮放，所以在寬度變化的同時(shí)，需要不斷調(diào)整元素的位置，令其符合視覺(jué)效果

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=30

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

現(xiàn)在我們已經(jīng)完成了縮放，但是當(dāng)元素向右縮小到最小值時(shí)，元素會(huì)向右移動(dòng)，顯然這是不符合邏輯的，所以我們需要對(duì)偏移進(jìn)行限制

//最大偏移為已經(jīng)偏移的距離+目標(biāo)元素的寬度-最小寬度

letdistanceX=Math.min(tx+width-minWidth,tx+(e.clientX-startX))

4.如果縮放的尺寸需要限制在父元素內(nèi)，我們需要繼續(xù)完善代碼

//最大寬度為元素當(dāng)前偏移量+最初的寬度，最小寬度為minWidth

newWidth=Math.min(tx+width,Math.max(minWidth,width-(e.clientX-startX)))

//最大偏移為已經(jīng)偏移的距離+目標(biāo)元素的寬度-最小寬度,最小偏移為0

letdistanceX=Math.max(0,Math.min(tx+width-minWidth,tx