Element-Gesture 드래그 메서드

서하나·2021년 8월 27일
0

엘리먼트를 드래그하면 드래그한 정보를 반환하고 함수를 실행하는 메서드를 만들었습니다.

Element-Gesture

엘리먼트를 드래그하면 드래그한 방향, 거리, 위치등을 반환하는 메서드입니다. 인자로 키가 이벤트명이고 값이 함수인 객체를 받습니다.

사용방법

Element-Gesture는 세가지 이벤트를 지원합니다.

이벤트의미
dragStart드래그를 시작할 때
drag드래그를 실행할 때
dragEnd드래그를 끝낼 때

아래와 같이 사용할 수 있습니다.

<body>
    <div id="box"></div>
</body>
const box = document.querySelector('#box');
box.gesture({
    dragStart : (parameter,element,event) => {
        ...
    },
    drag : (parameter,element,event) => {
        ...
    },
    dragEnd : (parameter,element,event) => {
        ...
    }
})

parameter는 다음과같은 값을 반환합니다.

형식비고
type이벤트 이름string
start드래그를 시작한 위치array[x, y]
direction드래그를 하는 방향array[x, y]
move이번 틱에 이동한 거리array[x, y, total]
position현재 포인터의 위치array[x, y]
prePosition이전 포인터의 위치array[x, y]
distance시작점으로부터의 이동 거리array[x, y, total]
distanceAll시작점으로부터의 현재까지 이동한 총 거리number

사용하기

profile
프론트엔드 개발자

0개의 댓글