caimei-authentic-manager/src/components/DragLayout/dragmove.js

// https://github.com/knadh/dragmove.js
// Kailash Nadh (c) 2020.
// MIT License.

let _loaded = false
const _callbacks = []
const _isTouch = window.ontouchstart !== undefined

export const dragmove = function(target, handler, onStart, onEnd) {
  // Register a global event to capture mouse moves (once).
  if (!_loaded) {
    document.addEventListener(_isTouch ? 'touchmove' : 'mousemove', function(e) {
      let c = e
      if (e.touches) {
        c = e.touches[0]
      }

      // On mouse move, dispatch the coords to all registered callbacks.
      for (var i = 0; i < _callbacks.length; i++) {
        _callbacks[i](c.clientX, c.clientY)
      }
    })
  }

  _loaded = true
  let isMoving = false
  let hasStarted = false
  let startX = 0
  let startY = 0
  let lastX = 0
  let lastY = 0

  // On the first click and hold, record the offset of the pointer in relation
  // to the point of click inside the element.
  handler.addEventListener(_isTouch ? 'touchstart' : 'mousedown', function(e) {
    e.stopPropagation()
    e.preventDefault()
    if (target.dataset.dragEnabled === 'false') {
      return
    }

    let c = e
    if (e.touches) {
      c = e.touches[0]
    }

    isMoving = true
    startX = target.offsetLeft - c.clientX
    startY = target.offsetTop - c.clientY
  })

  // On leaving click, stop moving.
  document.addEventListener(_isTouch ? 'touchend' : 'mouseup', function(e) {
    if (onEnd && hasStarted) {
      onEnd(target, parseInt(target.style.left), parseInt(target.style.top))
    }

    isMoving = false
    hasStarted = false
  })

  // Register mouse-move callback to move the element.
  _callbacks.push(function move(x, y) {
    if (!isMoving) {
      return
    }

    if (!hasStarted) {
      hasStarted = true
      if (onStart) {
        onStart(target, lastX, lastY)
      }
    }

    lastX = x + startX
    lastY = y + startY

    // If boundary checking is on, don't let the element cross the viewport.
    if (target.dataset.dragBoundary === 'true') {
      lastX = Math.min(window.innerWidth - target.offsetWidth, Math.max(0, lastX))
      lastY = Math.min(window.innerHeight - target.offsetHeight, Math.max(0, lastY))
    }

    target.style.left = lastX + 'px'
    target.style.top = lastY + 'px'
  })
}

export { dragmove as default }