이동 단 JS 드래그 두 가지 방법 분석
그러나 한두 페이지 만 끌 어 다 놓 으 면 제스처 라 이브 러 리 를 하나 더 도입 하 는 것 은 수지 가 맞지 않 는 다.
최근 프로젝트 에 이런 수요 가 있 습 니 다.
이 한 곳 만 끌 어야 하기 때문에 나 는 제3자 고 를 도입 하지 않 았 다.
이동 단의 드래그 는 두 가지 주류 의 실현 방안 이 있다.
1.요 소 를 고정 위치 로 설정 한 다음 끌 때 포 지 셔 닝 을 수정 하여 끌 어 당 기 는 효 과 를 실현 합 니 다.
2.transform 의 평이 translate 속성 을 사용 하여 드래그 합 니 다.
프로젝트 1:고정 포 지 셔 닝 fixed
이 방안 의 핵심 은 요소 에 고정 포 지 셔 닝 position:fixed 를 추가 하 는 것 입 니 다.
그러나 포 지 셔 닝 후 요 소 는 문서 흐름 에서 벗 어 나 원래 의 레이아웃 에 영향 을 줄 수 있 습 니 다.
따라서 드래그(touch start 이벤트 트리거)를 시작 할 때 원래 요소 A 를 복사 해 야 합 니 다(cloneNode().
새로운 요소 A2 에 포 지 셔 닝 을 추가 하고 원래 요소 A 에 visibility:hidden 을 설정 합 니 다.숨 기 고 자리 잡기
1.1 마스크 만 들 기
먼저 마스크 를 만 드 는 방법 을 밀봉 하여 복사 한 요 소 를 설치 하고 오 작 동 을 방지 합 니 다.
createModal (id) {
let modal = document.getElementById(id)
if (!modal) { //
modal = document.createElement('div')
modal.id = id
modal.style.cssText = `position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999;`
document.body.appendChild(modal)
}
},touch start 이 벤트 를 실행 할 때 먼저 마스크 를 만 듭 니 다.
또한 getBoundingClient Rect()방법 을 통 해 요소 A 의 좌 표를 얻 고 출발점 정 보 를 기록 합 니 다.
시작 정 보 를 기록 하기 위해 서 는 data 에서 대상 source 를 만 들 고 클릭 한 위치 client 와 초기 위치 좌표 start 를 기록 해 야 합 니 다.
handleTouchstart (e) { //
//
this.createModal(this.modalID) // modalID id，
let element = e.targetTouches[0]
let target = e.target.cloneNode(true) //
target.id = this.copyID // copyID id，
// client，
this.source.client = {
x: element.clientX,
y: element.clientY
}
//
let disX = this.source.start.left = element.target.getBoundingClientRect().left
let disY = this.source.start.top = element.target.getBoundingClientRect().top
target.style.cssText = `position: fixed; left: ${disX}px; top: ${disY}px;`
//
document.getElementById(this.modalID).appendChild(target)
},드래그 할 때 터치 모 브 사건 을 감청 합 니 다.
[현재 마우스 포인트 위치]에서[초기 클릭 위치]를 빼 고 이동 하 는 거 리 를 얻 습 니 다.
초기 좌표 정 보 를 결합 하여 드래그 요소 의 좌 표를 업데이트 합 니 다.
handleTouchmove (e) { //
let element = e.targetTouches[0]
let target = document.getElementById(this.copyID)
// client
let left = this.source.start.left + element.clientX - this.source.client.x
let top = this.source.start.top + element.clientY - this.source.client.y
//
target.style.left = `${left}px`
target.style.top = `${top}px`
},드래그 끝 날 때 종점 위 치 를 기록 하고 마스크 를 삭제 합 니 다.
handleTouchend (e) { //
let end = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
//
let modal = document.getElementById(this.modalID)
document.body.removeChild(modal)
//
this.doingSth(end)
},업무 장면 에 따라 자체 적 으로 추가 하거나 방안 2 를 참고 할 수 있다.
프로젝트 2:애니메이션 번역
이 방안 은 더 간단 합 니 다.추가 DOM 요 소 를 만 들 필요 가 없습니다.
원본 요소 에 transform 속성 만 추가 하고 transition 속성 도 필요 없습니다.
그리고 드래그 하 는 과정 에서 transform:translate(X,Y)에서 x,y 의 좌표 정 보 를 실시 간 으로 업데이트 하여 드래그 를 실현 합 니 다.
2.1 끌 기 시작
끌 기 시작 할 때,기점 좌표 만 기록 해 야 한다
handleTouchstart (e) { //
let element = e.targetTouches[0]// client ，
this.source.client = {
x: element.clientX,
y: element.clientY
}
},2.2 처리 드래그
현재 좌표 와 기점 좌표 에 따라 거 리 를 계산 한 다음 translate 의 좌 표를 업데이트 합 니 다.
handleTouchmove (e) { //
let element = e.targetTouches[0]
// client
let x = element.clientX - this.source.client.x
let y = element.clientY - this.source.client.y
//
element.target.style.cssText = `transform: translate(${x}px, ${y}px);`
},드래그 완료 후 이동 애니메이션 제거
handleTouchend (e) { //
//
e.target.style.cssText = `transform: none;`
},프로젝트 1 은 대상 요소 의 좌표 정 보 를 가 져 올 때 getBoundingClient Rect()방법 을 사용 합 니 다.
그러나 이 방법 은 성능 이 높 지 않 으 니 적 게 써 야 한다.
그리고 이 방법 을 즉시 사 용 했 습 니 다.마지막 에 얻 은 left 와 top 도 정확 하지 않 습 니 다.touch start 를 할 때 요소 가 뚜렷하게 반 짝 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
