Skip to content

Instantly share code, notes, and snippets.

@zhuweiyou
Last active August 18, 2023 09:50
Show Gist options
  • Save zhuweiyou/792ef49cd63007e68e3112657767bfa7 to your computer and use it in GitHub Desktop.
Save zhuweiyou/792ef49cd63007e68e3112657767bfa7 to your computer and use it in GitHub Desktop.
让元素可以拖动
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)
}
}
import { movable } from './movable.js'
// set movable
const off = movable('#element')
// remove listener
off()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment