一百多行代碼實現(xiàn)react拖拽hooks

更新時間：2021年03月21日 09:32:50 作者：孟祥_成都

這篇文章主要介紹了一百多行代碼實現(xiàn)react拖拽hooks，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

源碼總共也就一百多行，看完這個大致可以理解一些成熟的react拖拽庫的實現(xiàn)思路，比如react-dnd，然后你上手這些庫的時候就非?？炝?。

使用hooks實現(xiàn)的大致效果動圖如下：

我們的目標是實現(xiàn)一個useDrag和useDrop的hooks，類似以下用法就可以輕松讓元素可以拖拽，并且在拖拽的各個生命周期，如下，可以自定義傳遞消息（順便介紹幾個拖拽會觸發(fā)的事件）。

dragstart：用戶開始拖拉時，在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。
dragenter：拖拉進入當前節(jié)點時，在當前節(jié)點上觸發(fā)一次，該事件的target屬性是當前節(jié)點。通常應(yīng)該在這個事件的監(jiān)聽函數(shù)中，指定是否允許在當前節(jié)點放下（drop）拖拉的數(shù)據(jù)。如果當前節(jié)點沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當前節(jié)點放下數(shù)據(jù)。在視覺上顯示拖拉進入當前節(jié)點，也是在這個事件的監(jiān)聽函數(shù)中設(shè)置。
dragover：拖拉到當前節(jié)點上方時，在當前節(jié)點上持續(xù)觸發(fā)（相隔幾百毫秒），該事件的target屬性是當前節(jié)點。該事件與dragenter事件的區(qū)別是，dragenter事件在進入該節(jié)點時觸發(fā)，然后只要沒有離開這個節(jié)點，dragover事件會持續(xù)觸發(fā)。
dragleave：拖拉操作離開當前節(jié)點范圍時，在當前節(jié)點上觸發(fā)，該事件的target屬性是當前節(jié)點。如果要在視覺上顯示拖拉離開操作當前節(jié)點，就在這個事件的監(jiān)聽函數(shù)中設(shè)置。

使用方法 + 源碼講解

class Hello extends React.Component<any, any> {
 constructor(props: any) {
  super(props)
  this.state = {}
 }

 render() {
  return (
   <DragAndDrop>
    <DragElement />
    <DropElement />
   </DragAndDrop>
  )
 }
}

ReactDOM.render(<Hello />, window.document.getElementById("root"))

如上，DragAndDrop組件的作用是給所有的使用useDrag和useDrop的組件傳遞消息，比如當前拖拽的元素是那個dom，或者你想要其他信息都可以往里面加，我們看看它的實現(xiàn)。

const DragAndDropContext = React.createContext({ DragAndDropManager: {} })；
const DragAndDrop = ({ children }) => (
 <DragAndDropContext.Provider value={{ DragAndDropManager: new DragAndDropManager() }}>
  {children}
 </DragAndDropContext.Provider>
)

可以看到傳遞消息是用react的Context的api去實現(xiàn)的，重點就是這個DragAndDropManager，我們看下實現(xiàn)

export default class DragAndDropManager {

 constructor() {
  this.active = null
  this.subscriptions = []
  this.id = -1
 }

 setActive(activeProps) {
  this.active = activeProps
  this.subscriptions.forEach((subscription) => subscription.callback())
 }

 subscribe(callback) {
  this.id += 1
  this.subscriptions.push({
   callback,
   id: this.id,
  })

  return this.id
 }

 unsubscribe(id) {
  this.subscriptions = this.subscriptions.filter((sub) => sub.id !== id)
 }
}

setActive的作用是用來記錄當前drag的元素是哪個，useDrag里面會用到，我們在看useDrag的hooks實現(xiàn)的時候就會明白只要調(diào)用setActive方法把drag的dom元素傳進去，是不是就知道當前拖拽的元素是哪個了呢。

除此之外，我還增加了訂閱事件的api，subscribe，目前我并沒有使用它，本次示例里你可以忽略這部分，知道可以添加訂閱事件就行。

接著我們看看，useDrag的使用，DragElement的實現(xiàn)如下：

function DragElement() {
 const input = useRef(null)
 const hanleDrag = useDrag({
  ref: input,
  collection: {}, // 這里可以填寫任意你想傳遞給drop元素的消息，后面會通過參數(shù)的形式傳遞給drop元素
 })
 return (
  <div ref={input}>
   <h1 role="button" onClick={hanleDrag}>
    drag元素
   </h1>
  </div>
 )
}

我們就來看下useDrag的實現(xiàn)，非常簡單

export default function useDrag(props) {

 const { DragAndDropManager } = useContext(DragAndDropContext)
 
 const handleDragStart = (e) => {
  DragAndDropManager.setActive(props.collection)
  if (e.dataTransfer !== undefined) {
   e.dataTransfer.effectAllowed = "move"
   e.dataTransfer.dropEffect = "move"
   e.dataTransfer.setData("text/plain", "drag") // firefox fix
  }
  if (props.onDragStart) {
   props.onDragStart(DragAndDropManager.active)
  }
 }
 
 useEffect(() => {
  if (!props.ref) return () => {}
  const {
   ref: { current },
  } = props
  if (current) {
   current.setAttribute("draggable", true)
   current.addEventListener("dragstart", handleDragStart)
  }
  return () => {
   current.removeEventListener("dragstart", handleDragStart)
  }
 }, [props.ref.current])

 return handleDragStart
}

useDrag做的事情非常簡單，

首先通過useContext，來把獲取最外層store的數(shù)據(jù)，也就是上面代碼的DragAndDropManager
在useEffect里面，如果外界傳入了ref，就將這個dom元素的屬性draggable設(shè)為true，也就是可拖拽狀態(tài)
然后給這個元素綁定dragstart事件，注意了，銷毀組件的時候我們要移除事件，以防內(nèi)存泄漏
handleDragStart事件首先把外界傳的props.collection更新到我們的外界倉庫里，這樣每一個要drag，也就是拖拽的元素都可以將我們useDrag中傳是入的useDrag({collection: {}})信息，通過DragAndDropManager.setActive(props.collection)的方式，傳入到外界的store
接著我們dataTransder屬性上做一些事，目的是設(shè)置元素的拖拽屬性為move，并且為了兼容firefox做了處理。
最后每當出發(fā)drag事件的時候，外界傳入的onDragStart事件也會觸發(fā)，并且我們將store里的數(shù)據(jù)傳入進去

其中，useDrop的使用，DropElement的實現(xiàn)如下：

function DropElement(props: any): any {
 const input = useRef(null)
 useDrop({
  ref: input,
  // e代表dragOver事件發(fā)生時，正在被over的元素的event對象
  // collection是store存儲的數(shù)據(jù)
  // showAfter是表示，是否鼠標拖拽元素時，鼠標經(jīng)過drop元素的上方（上方就是上半邊，下方就是下半邊）
  onDragOver: (e, collection, showAfter) => {
  // 如果經(jīng)過上半邊，drop元素的上邊框就是紅色
   if (!showAfter) {
    input.current.style = "border-bottom: none;border-top: 1px solid red"
   } else {
    // 如果經(jīng)過下半邊，drop元素的上邊框就是紅色
    input.current.style = "border-top: none;border-bottom: 1px solid red"
   }
  },
  // 如果在drop元素上放開鼠標，則樣式清空
  onDrop: () => {
   input.current.style = ""
  },
  // 如果在離開drop元素，則樣式清空
  onDragLeave: () => {
   input.current.style = ""
  },
 })
 return (
  <div>
   <h1 ref={input}>drop元素</h1>
  </div>
 )
}

最后，我們來看看useDrop的實現(xiàn)

export default function useDrop(props) {
// 獲取最外層store里的數(shù)據(jù)
 const { DragAndDropManager } = useContext(DragAndDropContext)
 const handleDragOver = (e) => {
 // e就是拖拽的event對象
  e.preventDefault()
  // getBoundingClientRect的圖請看下面
  const overElementHeight = e.currentTarget.getBoundingClientRect().height / 2
  const overElementTopOffset = e.currentTarget.getBoundingClientRect().top
  // clientY就是鼠標到瀏覽器頁面可視區(qū)域的最頂端的距離
  const mousePositionY = e.clientY
  // mousePositionY - overElementTopOffset就是鼠標在元素內(nèi)部到元素border-top的距離
  const showAfter = mousePositionY - overElementTopOffset > overElementHeight
  if (props.onDragOver) {
   props.onDragOver(e, DragAndDropManager.active, showAfter)
  }
 }
 // drop事件
 const handledDop = (e: React.DragEvent) => {
  e.preventDefault()

  if (props.onDrop) {
   props.onDrop(DragAndDropManager.active)
  }
 }
 // dragLeave事件
 const handledragLeave = (e: React.DragEvent) => {
  e.preventDefault()

  if (props.onDragLeave) {
   props.onDragLeave(DragAndDropManager.active)
  }
 }
  // 注冊事件，注意銷毀組件時要注銷事件，避免內(nèi)存泄露
 useEffect(() => {
  if (!props.ref) return () => {}
  const {
   ref: { current },
  } = props
  if (current) {
   current.addEventListener("dragover", handleDragOver)
   current.addEventListener("drop", handledDop)
   current.addEventListener("dragleave", handledragLeave)
  }
  return () => {
   current.removeEventListener("dragover", handleDragOver)
   current.removeEventListener("drop", handledDop)
   current.removeEventListener("dragleave", handledragLeave)
  }
 }, [props.ref.current])
}

getBoundingClientRect的api圖解：

rectObject = object.getBoundingClientRect();

rectObject.top：元素上邊到視窗上邊的距離;

rectObject.right：元素右邊到視窗左邊的距離;

rectObject.bottom：元素下邊到視窗上邊的距離;

rectObject.left：元素左邊到視窗左邊的距離;