让元素可以拖动

movable.js

export function movable(element) {
    if (typeof element === 'string') {
        element = document.querySelector(element)
    }

    let isDragging = false
    let currentX
    let currentY
    let initialX
    let initialY
    let xOffset = 0
    let yOffset = 0

    element.addEventListener('touchstart', dragStart, false)
    element.addEventListener('touchend', dragEnd, false)
    element.addEventListener('touchmove', drag, false)

    element.addEventListener('mousedown', dragStart, false)
    element.addEventListener('mouseup', dragEnd, false)
    element.addEventListener('mousemove', drag, false)

    function dragStart(e) {
        if (e.type === 'touchstart') {
            initialX = e.touches[0].clientX - xOffset
            initialY = e.touches[0].clientY - yOffset
        } else {
            initialX = e.clientX - xOffset
            initialY = e.clientY - yOffset
        }

        if (e.target === element) {
            isDragging = true
        }
    }

    function dragEnd(e) {
        initialX = currentX
        initialY = currentY

        isDragging = false
    }

    function drag(e) {
        if (isDragging) {
            e.preventDefault()

            if (e.type === 'touchmove') {
                currentX = e.touches[0].clientX - initialX
                currentY = e.touches[0].clientY - initialY
            } else {
                currentX = e.clientX - initialX
                currentY = e.clientY - initialY
            }

            xOffset = currentX
            yOffset = currentY

            setTranslate(currentX, currentY, element)
        }
    }

    function setTranslate(xPos, yPos, el) {
        el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
    }

    return () => {
        element.removeEventListener('touchstart', dragStart)
        element.removeEventListener('touchend', dragEnd)
        element.removeEventListener('touchmove', drag)

        element.removeEventListener('mousedown', dragStart)
        element.removeEventListener('mouseup', dragEnd)
        element.removeEventListener('mousemove', drag)
    }
}

movable.test.js

import { movable } from './movable.js'

// set movable
const off = movable('#element')

// remove listener
off()