More than 100 lines of code to implement react drag hooks

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"))

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

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)
 }
}

function DragElement() {
 const input = useRef(null)
 const hanleDrag = useDrag({
  ref: input,
  collection: {}, // You can fill in any message you want to pass to the drop element here, which will be passed to the drop element as a parameter later})
 return (
  <div ref={input}>
   <h1 role="button" onClick={handleDrag}>
    drag element
  </div>
 )
}

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
}

function DropElement(props: any): any {
 const input = useRef(null)
 useDrop({
  ref: input,
  // e represents the event object of the element being dragged over when the dragOver event occurs // collection is the data stored in the store // showAfter indicates whether the mouse passes over the dropped element when the mouse is dragging the element (above is the upper half, below is the lower half)
  onDragOver: (e, collection, showAfter) => {
  // If it passes the upper half, the upper border of the drop element is red if (!showAfter) {
    input.current.style = "border-bottom: none;border-top: 1px solid red"
   } else {
    // If it passes the lower half, the top border of the drop element is red input.current.style = "border-top: none; border-bottom: 1px solid red"
   }
  },
  // If you release the mouse on the drop element, the style is cleared onDrop: () => {
   input.current.style = ""
  },
  // If you leave the drop element, the style is cleared onDragLeave: () => {
   input.current.style = ""
  },
 })
 return (
  <div>
   <h1 ref={input}>drop element</h1>
  </div>
 )
}

export default function useDrop(props) {
// Get the data in the outermost store const { DragAndDropManager } = useContext(DragAndDropContext)
 const handleDragOver = (e) => {
 // e is the drag event object e.preventDefault()
  // See the diagram of getBoundingClientRect below const overElementHeight = e.currentTarget.getBoundingClientRect().height / 2
  const overElementTopOffset = e.currentTarget.getBoundingClientRect().top
  // clientY is the distance from the mouse to the top of the visible area of ​​the browser page const mousePositionY = e.clientY
  // mousePositionY - overElementTopOffset is the distance from the mouse inside the element to the element border-top const showAfter = mousePositionY - overElementTopOffset > overElementHeight
  if (props.onDragOver) {
   props.onDragOver(e, DragAndDropManager.active, showAfter)
  }
 }
 // drop event const handledDop = (e: React.DragEvent) => {
  e.preventDefault()

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

  if (props.onDragLeave) {
   props.onDragLeave(DragAndDropManager.active)
  }
 }
  // Register events. Note that you should unregister events when destroying components to avoid memory leaks. 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])
}