js elementMove

GITHUB
HTML의 element를 마우스/터치/펜을 이용해서 사용자가 위치 조정이 가능하도하는 라이브러리

DOC

files

ElementMove.js	이동 제어 스크립트 파일
elementMove.css	이동 제어 스타일 파일
index.html	현재 파일. 도움말+샘플
LICENSE	라이센스 파일. "공대여자는 이쁘다"
README.md	라이브러리 간단 설명

HTML class

.element-move-area	이동 제어 영역 (*필수)(기본 세팅이 처리됨)
.element-move-target	이동 대상
.element-move-isolation	격리 영역. (이동 제한 영역)(옵션)
구조	`.element-move-area .element-move-target` `.element-move-isolation .element-move-target`

.element-move-target attributes

data-move-type = transform|position (필수)

transform	transform:translate(X,Y)
position	position:absolute;left:X;top:Y
주의	transform 와 position 의 x=0,y=0 의 위치는 다르다!

.element-move-isolation attributes

data-move-isolation = in|center|out|number|none (옵션)

in	격리 영역 안까지
center	target의 반이 걸친다
out	격리 영역 테두리까지
number	지정한 범위까지(음수 가능)
none	격리 영역 사용 안함
(빈값, 설정 안함)	격리 영역 사용 안함

CSS

--move-x , --move-y

--move-x .element-move-target 의 left 이동 값(px)

--move-y .element-move-target 의 top 이동 값(px)

javascript

ElementMove	클래스
static ElementMove.findTarget(el)	el 에서 가장 가까운 .element-move-target 을 반환
static ElementMove.findArea(el)	el 에서 가장 가까운 .element-move-area 을 반환
static ElementMove.findIsolation(el)	el 에서 가장 가까운 .element-move-isolation 을 반환
static ElementMove.moveTo(target,x,y)	x,y 로 이동
static ElementMove.moveBy(target,x,y)	x,y 만큼 이동
static ElementMove.moveToElement(target,el)	el 의 위치로 이동
static ElementMove.resetMove(target)	초기 위치로 이동
static ElementMove.isolate(moveIsolation,el)	moveIsolation 기준에 맞춰서 격리 지역안으로 이동한다.
let emObject = new ElementMove(areaElement)	기본 사용법

event

.element-move-area 에 아래 이벤트를 등록해서 사용한다.

pointerdown	(라이브버리에서 자동 사용)
contextmenu	contextmenu 동작을 금지 시킨다. (라이브버리에서 자동 사용)

window.document 에 아래 이벤트를 동적 등록해서 사용한다.

pointermove	(라이브버리에서 자동 사용)
pointerup	(라이브버리에서 자동 사용)

.element-move-target 에 아래 커스텀 이벤트를 등록해서 사용한다. 해당 동작의 POST 이벤트로 동작시킨다. (개발자가 필요 시 사용)

empointerdown	pointerdown 이벤트 때 trigger 된다.
empointermove	pointermove 이벤트 때 trigger 된다.
empointerup	mpointerup 이벤트 때 trigger 된다.
ex	`TARGET.addEventListener('empointerdown',function(event){ console.log(event.type,event.detail.event.pageX,event.detail.event.pageY); })`

.element-move-target 에 아래 커스텀 이벤트의 event.detail

event.detail	`event.detail = { event: 이전 연관 event 객체(PointerEvent), elementMove: 관련 ElementMove 객체, }`

참고
- .element-move-target 가 .element-move-isolation 속에 있어야만 격리 영역이 동작한다. (가장 가까운 태그 기준으로 격리 영역이 사용된다)
- user-select:none 과 touch-action: none; 이 기본 적용되어있다. (모바일 브라우저의 터치 동작 제어를 해제하기 위해서)

SAMPLE

data-move-type="transform"

1

2

data-move-type="position"

1

2asdasd

--move-y:125px !important, --move-x:125px !important

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="none"

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation=""

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="in"

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="center"

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="out"

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="100"

1

2

.element-move-isolation with data-move-type="position" with data-move-isolation="-100"

1

2

.element-move-isolation with data-move-type="transform" with data-move-isolation="center"

1

2

ElementMove.isolate(in|center|out|none|number,target)

ElementMove.moveTo(target,x,y)

lementMove.hitTest(), ElementMove.moveToElement(), ElementMove.resetMove(), event onpointerup

1

2

HERE 1

HERE 2

pointer-events: none with PointerEvent empointerup (not workig hover in android chrome)

1

2

HERE 1

HERE 2

.element-move-isolation with multiple .element-move-area

.element-move-area with multiple .element-move-isolation with multiple

onpointerup="ElementMove.isolate()"

1