@dingdaoos/lucid-utils/utils/drag-event.ts

Lucid utils

interface OptionsType {
  dragMove?: (e:MouseEvent) => void
  dragStop?: (e:MouseEvent) => void
  dragStart?: (e:MouseEvent) => void
}

let isDragging = false

export default (el: HTMLElement | undefined, options: OptionsType) => {
  const dragMove = (e:MouseEvent) => {
    options.dragMove && options.dragMove(e)
  }
  const dragStop = (e:MouseEvent) => {
    document.removeEventListener('mousemove', dragMove)
    document.removeEventListener('mouseup', dragStop)
    document.onselectstart = null
    document.ondragstart = null

    isDragging = false

    options.dragStop && options.dragStop(e)
  }
  el && el.addEventListener('mousedown', (e:MouseEvent) => {
    if (isDragging) return
    document.onselectstart = function () {
      return false
    }
    document.ondragstart = function () {
      return false
    }

    document.addEventListener('mousemove', dragMove)
    document.addEventListener('mouseup', dragStop)
    isDragging = true

    options.dragStart && options.dragStart(e)
  })
}