前言

提到元素拖拽，通常都會先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 來實現，它提供了一套完整的事件機制，看起來似乎是首選的解決方案，但實際卻不是那麼美好，主要是它的樣式太過簡陋，無法實現更高級的用户體驗：

這是瀏覽器默認的拖拽效果，點住拖拽任意圖片或文字都會產生。

筆者因為之前有個小項目需要經常參考稿定設計，一直有留意其元素拖拽的效果(如下圖)，所以接下來我將以這種效果為藍本，使用原生 JS 實現一個富有動感的 自定義拖拽 效果，話不多説直接開摸。

實現原理

首先説下思路，我們需要知道鼠標的三個事件，分別是 mousedown，mousemove，mouseup ，當點擊按下的時候，克隆一個絕對定位的元素，並標識下"拖拽中"的狀態，接着在 mousemove 中就可以判斷應該執行的具體方法，從而讓元素隨着鼠標移動起來。

在監聽事件的 event 對象中，有幾個參數是比較重要的：clientX，clientY 標識的鼠標當前橫座標和縱座標，offsetX 和 offsetY 表示相對偏移量，可以在 mousedown 鼠標按下時記錄初始座標，在 mouseup 鼠標抬起時判斷是否在目標區域中，如果是則用鼠標獲取到的當前的偏移量 - 初始座標得到元素實際在目標區域中的位置。

為方便閲讀，以下所有代碼均有部分省略，演示 GIF 可能會掉幀，文末可查看完整源碼配合本文食用，代碼量並不多。

基礎界面

先簡單實現一個兩欄佈局界面，並應用上一些 CSS 效果:

<div id="app">
  <div class="slide">
    <div id="list">
      <img class="item" src="......." />
      <img  .........
    </div>
  </div>
  <div class="content"></div>
</div>

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.active {
  cursor: grabbing;
}

.slide {
  width: 260px;
  height: 100%;
  overflow: scroll;
  border-right: 1px solid rgba(0,0,0,.15);
  #list {
    user-select: none;
    .item {
      background: rgba(0,0,0,.15);
      width: 120px;
      display: inline-block;
      break-inside: avoid;  
      margin-bottom: 4px;
    }
    .item:hover {
      cursor: grab;
      filter: brightness(90%);
    }
    .item:active {
      cursor: grabbing;
    }
  }
  .grid {
      column-count: 2;
      column-gap: 0px;
  }
}
.slide::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

#content {
  position: relative;
  flex: 1;
  height: 100%;
  margin-left: 45px;
  background: rgba(0,0,0,.07);
  .item {
    position: absolute;
    transform-origin: top left;
  }
}

利用濾鏡 filter: brightness(90%); 調節明亮度可以快速實現一個鼠標覆蓋的動態效果，無需額外製作遮罩：

使用偽類激活 cursor 的 grab 和 grabbing 可以設置抓取動作的圖標:

實現元素抓取

利用事件委託機制為選擇列表添加 mousedown 事件監聽，實現抓取的原理是在鼠標按下時克隆按下的元素，並把克隆出來的元素設置成絕對定位，讓它"浮"起來：

let dragging = false
let cloneEl = null // 克隆元素
let initial = {} // 初始化數據記錄
......
// 選中了元素
cloneEl = e.target.cloneNode(true) // 克隆元素
cloneEl.classList.add('flutter') // 使其浮動
e.target.parentElement.appendChild(cloneEl) // 加入到列表中
dragging = true // 標記拖動開始

// TODO: 初始化克隆元素的定位並記錄，方便後面移動時計算位置
........

.flutter {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}

將鼠標的座標設置為克隆元素的絕對定位值(left、top)，就會像下圖所示這樣，此時減去 offset 偏移量，就能讓克隆元素覆蓋在本體上面。

初始化的值需要記錄起來方便後續計算，同時我們用 dragging 變量標記了狀態(拖動中)，接下來配合移動鼠標的監聽事件就能將元素“抓”起來了：

// 鼠標移動
window.addEventListener("mousemove", (e) => {
  if (dragging && cloneEl) {
    // TODO: 處理元素的移動：改變 left top 定位
    // x 軸（left）計算方法：e.clientX - initial.offsetX
    // y 軸（top）計算方法：e.clientY - initial.offsetY
  }
})

上面只是實現了元素的拖動，但是"克隆"的效果實在太明顯了，為了讓元素看起來更像是拖出來的而不是複製出來的，我們還要讓本體隱藏，同時DOM結構不能丟失，這時只需在按下拖動時給本體元素設置個 opacity: 0，結束時再改回透明度1就能搞定。

雖然到這功能就算實現了，但實際效果還是有點僵硬，參考稿定設計中的元素放開時會固定回到一個位置，然後再收回去，這個過渡又有點鬼畜，不夠流暢。其實只需讓元素回退過程有一個自然地動畫就行，transition 就能實現：

.is_return {
  transition: all 0.3s;
}

// 鼠標抬起
window.addEventListener("mouseup", (e) => {
  dragging = false
  if (cloneEl) {
      cloneEl.classList.add('is_return') // 加上過渡動畫
      changeStyle(......) // 設置回元素的初始位置
      setTimeout(() => {
        cloneEl.remove() // 移除元素
      }, 300)
  }
})

最終我在動作結束時給克隆元素添加了過渡屬性，然後直接設置回初始座標讓克隆元素回到它的出生地點，用定時器在過渡動畫持續的相同時間後移除克隆元素，這樣就有了一個平滑穩定的回退動畫。

性能優化

由於在改變元素狀態的過程中需要頻繁進行多個 CSS 操作，為降低迴流重繪的成本，最好將多個操作合併起來處理，這裏利用了 cssText 來實現：

// 改變漂浮元素：x、y、縮放倍率
function moveFlutter(x, y, d = 0) {
  const scale = d ? initial.width + d < initial.fakeSize ? `transform: scale(${(initial.width + d) / initial.width})` : null : null
  const options = [`left: ${x}px`, `top: ${y}px`]
  scale && options.push(scale)
  // 將CSS處理成數組，然後丟進DOM操作方法中一次執行
  changeStyle(options)
}
// 合併多個操作
function changeStyle(arr) {
  const original = cloneEl.style.cssText.split(';')
  original.pop()
  cloneEl.style.cssText = original.concat(arr).join(';') + ';'
}

實現拖拽放大

放大我們可以使用 transform: scale 來實現，只需要將拖動位置之間的距離當做變化係數（假設為d），那麼scale變化數值即為(元素寬度 + d)/元素寬度，而放大的最終倍數必定為 圖片實際寬度/元素的寬度，只要判斷不超過這個邊界就可以。（這個圖片實際寬高在真實業務場景中建議在上傳資源時就記錄在數據庫，這裏我是模擬的隨機一個原圖尺寸）。

兩點間距離計算公式為:

代碼實現：

// 計算兩點之間距離
function distance({ clientX, clientY }) {
  const { clientX: x, clientY: y } = initial // 獲取初始的座標
  const b = clientX - x;
  const a = clientY - y;
  return Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2))
}

window.addEventListener("mousemove", (e) => {
  if (dragging && cloneEl) {
    const d = distance(e) // 計算距離
    moveFlutter(e.clientX - initial.offsetX, e.clientY - initial.offsetY, d)
  }
})
function moveFlutter(x, y, d = 0) {
  let scale = ''
  // 如果距離大於0，且寬度+距離小於實際寬度
  if( d && initial.width + d <= initial.fakeSize ) {
      scale = `transform: scale(${(initial.width + d) / initial.width})`
  }
  // TODO ... changeStyle ...
}

效果演示，GIF稍微掉幀：

注意元素都要設置 transform-origin: top left; 改變縮放原點到左上角，否則默認(中心為原點)的轉換會發生比較明顯的偏移。

實現放置

其實拖拽放置有點像是"複製"與"粘貼"，前面我們實現了複製，放置主要就是將元素粘貼到畫布當中，流程步驟如下：

1. 如果鼠標在目標區域，拷貝元素到畫布中，如果不在畫布中，執行倒退動畫
2. 刪除元素

// 完成處理
function done(x, y) {
  if (!cloneEl) { return }
  const newEl = cloneEl.cloneNode(true)
  newEl.classList.remove('flutter')
  newEl.src = cloneEl.getAttribute('raw') // 設置原圖地址
  newEl.style.cssText = `left: ${x - initial.offsetX}px; top: ${y - initial.offsetY}px;`
  document.getElementById('content').appendChild(newEl)
  // TODO: 元素移除
}

判斷是否在畫布內抬起很簡單，往畫布上綁定mouseup監聽事件即可，克隆的新元素必須刪除無用的屬性和class，此時設置元素的left、top即可將元素放置進畫布中，關鍵點在於畫布內的target有可能是錯的，因為如果鼠標抬起的區域已經放置了元素，那麼相對偏移量就得我們自己計算了，使用getBoundingClientRect方法獲取畫布本身相對於視窗的偏移，鼠標座標減去畫布本身的偏移就是元素在畫布中的位置了。

document.getElementById('content').addEventListener("mouseup", (e) => {
  if (e.target.id !== 'content') {
    const lostX = e.x - document.getElementById('content').getBoundingClientRect().left
    const lostY = e.y - document.getElementById('content').getBoundingClientRect().top
    done(lostX, lostY)
  } else { done(e.offsetX, e.offsetY) }
})

只貼了部分關鍵代碼，完整代碼文末查看。

邊界判斷

如果不對邊界情況進行處理可能會導致拖動時發生意外的中斷，無法正確回收克隆元素。

// 鼠標離開了視窗
document.addEventListener("mouseleave", (e) => {
  end()
})
// 用户可能離開了瀏覽器
window.onblur = () => {
  end()
}

體驗優化

參考稿定設計中元素拖拽是直接賦值原圖的，原圖大小通常無法控制，免不了需要加載時間，造成卡頓空白的問題，在網絡不夠快時體驗尤其尷尬：

我的優化思路是利用瀏覽器加載過同一張圖片就會優先讀緩存的機制，先用一個Image加載原圖，等其加載完畢再把拖拽元素的src改成原圖，這樣瀏覽器會"自動"幫我們優化這個過程，只需要注意一點，由於這是個異步任務，所以一定要做好對應標記，不然手速快的時候控制不好觸發順序。

function simulate(url, flag) {
  cloneEl.setAttribute('raw', url)
  const image = new Image()
  image.src = url
  image.onload = function () {
    // 異步任務，克隆節點可能已不存在，flag標記是否拖動的還是當前目標
    cloneEl && initial.flag === flag && (cloneEl.src = url)
  }
}

效果演示，故意加大了圖片的分辨率差異：

完整代碼

點我查看原文完整代碼地址

以上就是文章的全部內容，感謝看到這裏，希望對你有所幫助或啓發！創作不易，如果覺得文章寫得不錯，可以點贊收藏支持一下，也歡迎關注，我會持續更新實用的前端知識與技巧，我是茶無味de一天(公眾號: 品味前端)，期待與你共同成長~