js 페이지에서 요소 임의로 드래그
1686 단어 프런트 엔드
function moveanyway () {
//
var block = document.getElementById('myCoups')
if (block) {
var oW, oH
// touchstart
block.addEventListener('touchstart', function (e) {
var touches = e.touches[0]
oW = touches.clientX - block.offsetLeft
oH = touches.clientY - block.offsetTop
//
document.addEventListener('touchmove', defaultEvent, { passive: false })
}, false)
block.addEventListener('touchmove', function (e) {
var touches = e.touches[0]
var oLeft = touches.clientX - oW
var oTop = touches.clientY - oH
if (oLeft < 10) {
oLeft = 10
if (oTop <= 10) {
oTop = 10
} else if (oTop >= document.documentElement.clientHeight - block.offsetHeight - 10) {
oTop = document.documentElement.clientHeight - block.offsetHeight - 10
}
} else if (oLeft > document.documentElement.clientWidth - block.offsetWidth - 10) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth - 10)
if (oTop <= 10) {
oTop = 10
} else if (oTop >= document.documentElement.clientHeight - block.offsetHeight - 10) {
oTop = document.documentElement.clientHeight - block.offsetHeight - 10
}
} else if (oTop < 10) {
oTop = 10
} else if (oTop > document.documentElement.clientHeight - block.offsetHeight - 10) {
oTop = document.documentElement.clientHeight - block.offsetHeight - 10
}
block.style.left = oLeft + 'px'
block.style.top = oTop + 'px'
}, false)
block.addEventListener('touchend', function () {
document.removeEventListener('touchmove', defaultEvent, { passive: false })
}, false)
}
function defaultEvent (e) {
e.preventDefault()
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】컴포넌트의 3개의 네비게이션 가드일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
