Reactドラッグフックを実装するための100行以上のコード

クラスHelloはReact.Component<any, any>を拡張します。
 コンストラクタ(props: any) {
  スーパー(小道具)
  this.state = {}
 }

 与える（） {
  戻る （
   <ドラッグアンドドロップ>
    <ドラッグ要素 />
    <ドロップ要素 />
   </ドラッグアンドドロップ>
  ）
 }
}

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

DragAndDropManager を React.createContext に追加します。
const DragAndDrop = ({ children }) => (
 <DragAndDropContext.Provider 値 = {{ DragAndDropManager: new DragAndDropManager() }}>
  {子供たち}
 </ドラッグアンドドロップコンテキスト.プロバイダー>
）

デフォルトクラスDragAndDropManagerをエクスポートします。

 コンストラクタ() {
  this.active = null
  this.subscriptions = []
  this.id = -1
 }

 setActive(アクティブプロパティ) {
  this.active = アクティブプロパティ
  this.subscriptions.forEach((サブスクリプション) => subscription.callback())
 }

 subscribe(コールバック) {
  this.id += 1
  this.subscriptions.push({
   折り返し電話、
   id: this.id,
  })

  this.idを返す
 }

 登録解除(id) {
  this.subscriptions = this.subscriptions.filter((sub) => sub.id !== id)
 }
}

関数DragElement() {
 定数入力 = useRef(null)
 const hanleDrag = useDrag({
  参照: 入力、
  collection: {}, // ここでドロップ要素に渡したいメッセージを入力できます。このメッセージは後でドロップ要素にパラメータとして渡されます})
 戻る （
  <div ref={入力}>
   <h1 role="button" onClick={handleDrag}>
    ドラッグ要素
  </div>
 ）
}

デフォルト関数 useDrag(props) をエクスポートします。

 const { DragAndDropManager } = useContext(DragAndDropContext)
 
 定数handleDragStart = (e) => {
  DragAndDropManager.setActive(props.collection)
  e.dataTransfer !== 未定義の場合 {
   e.dataTransfer.effectAllowed = "移動"
   e.dataTransfer.dropEffect = "移動"
   e.dataTransfer.setData("text/plain", "drag") // Firefox の修正
  }
  （props.onDragStart）の場合{
   props.onDragStart(DragAndDropManager.active)
  }
 }
 
 使用効果(() => {
  もしprops.refがそうであれば、戻り値は（）=>{}
  定数{
   参照: { 現在の },
  } = 小道具
  if (現在) {
   current.setAttribute("ドラッグ可能", true)
   current.addEventListener("dragstart", handleDragStart)
  }
  戻り値 () => {
   current.removeEventListener("dragstart", handleDragStart)
  }
 }, [props.ref.current])

 handleDragStart を返す
}

関数 DropElement(props: any): any {
 定数入力 = useRef(null)
 ドロップを使用します({
  参照: 入力、
  // e は、dragOver イベントが発生したときにドラッグされている要素のイベント オブジェクトを表します // collection はストアに保存されているデータです // showAfter は、マウスが要素をドラッグしているときに、ドロップされた要素の上をマウスが通過するかどうかを示します (上は上半分、下は下半分)
  onDragOver: (e, コレクション, showAfter) => {
  // 上半分を通過すると、ドロップ要素の上部の境界線が赤くなります if (!showAfter) {
    input.current.style = "border-bottom: none;border-top: 1px の赤一色"
   } それ以外 {
    // 下半分を通過すると、ドロップ要素の上部の境界線は赤になります input.current.style = "border-top: none; border-bottom: 1px solid red"
   }
  },
  // ドロップ要素上でマウスを離すと、スタイルがクリアされます onDrop: () => {
   入力.現在のスタイル = ""
  },
  // ドロップ要素を離れるとスタイルはクリアされます onDragLeave: () => {
   入力.現在のスタイル = ""
  },
 })
 戻る （
  <div>
   <h1 ref={input}>要素をドロップ</h1>
  </div>
 ）
}

デフォルト関数 useDrop(props) をエクスポートします。
// 最も外側のストアのデータを取得します。const { DragAndDropManager } = useContext(DragAndDropContext)
 定数handleDragOver = (e) => {
 // e はドラッグ イベント オブジェクトです e.preventDefault()
  // 下の getBoundingClientRect の図を参照してください const overElementHeight = e.currentTarget.getBoundingClientRect().height / 2
  定数 overElementTopOffset = e.currentTarget.getBoundingClientRect().top
  // clientYはマウスからブラウザページの表示領域の上部までの距離です。const mousePositionY = e.clientY
  // mousePositionY - overElementTopOffset は、要素内のマウスから要素の border-top までの距離です。const showAfter = mousePositionY - overElementTopOffset > overElementHeight
  （props.onDragOver）の場合{
   props.onDragOver(e, DragAndDropManager.active, showAfter)
  }
 }
 // ドロップイベント const handledDop = (e: React.DragEvent) => {
  e.preventDefault()

  （props.onDrop）の場合{
   props.onDrop(DragAndDropManager.active)
  }
 }
 // dragLeave イベント const handlerragLeave = (e: React.DragEvent) => {
  e.preventDefault()

  （props.onDragLeave）の場合{
   props.onDragLeave(DragAndDropManager.active)
  }
 }
  // イベントを登録します。メモリリークを避けるために、コンポーネントを破棄するときにはイベントの登録を解除する必要があることに注意してください。useEffect(() => {
  もしprops.refがそうであれば、戻り値は（）=>{}
  定数{
   参照: { 現在の },
  } = 小道具
  if (現在) {
   current.addEventListener("dragover", handleDragOver)
   current.addEventListener("ドロップ"、handledDop)
   current.addEventListener("dragleave", 処理済みragLeave)
  }
  戻り値 () => {
   current.removeEventListener("dragover", handleDragOver)
   current.removeEventListener("drop", 処理されたDop)
   current.removeEventListener("dragleave", 処理済みragLeave)
  }
 }, [props.ref.current])
}