toDraggable
toDraggable
- html_node의 드래그 이벤트 제어를 할 수 있게 해준다.
function
- toDraggableCtrl = toDraggable(target,cb_onpointerdown,cb_onpointermove,cb_onpointerup) //target에 드래그 이벤트 설정
method
- toDraggableCtrl.enable() //드래그 이벤트 동작
- toDraggableCtrl.disable() //드래그 이벤트 중지
- toDraggable.cb_onpointerdown(evt,gapX,gapY,target,data) //top과 left를 이동시키는 이벤트 기본형 pointerdown 콜백 함수
- evt : 이벤트
- x,y : 현재 left,top 위치
- target : toDraggable 처리된 html_node (evt.target 과 다를 수 있다!)
- data : ing(진행여부),x(현재x 좌표),y(현재y좌표) 정보 제공
- toDraggable.cb_onpointermove(evt,gapX,gapY,target,data) //top과 left를 이동시키는 이벤트 기본형 pointermove 콜백 함수
- evt : 이벤트
- gapX,gapY : 이동 차이 left,top
- target : toDraggable 처리된 html_node
- data : ing(진행여부),x(현재x 좌표),y(현재y좌표) 정보 제공
- toDraggable.cb_onpointerup(evt,target,data) //top과 left를 이동시키는 이벤트 기본형 pointerup 콜백 함수
- evt : 이벤트
- target : toDraggable 처리된 html_node (evt.target 과 다를 수 있다!)
- data : ing(진행여부),x(현재x 좌표),y(현재y좌표) 정보 제공
html attribute
- data-drag-group="groupID" // 같은 그룹으로 지정되며, 드래그앤드롭시 동작을 제어할 수 있다.
ex1 : toDraggable
-
-
-
-
1
2
3
4
toExchangeable
- html_node의 드래그 이벤트 제어를 할 수 있게 해준다.
- required : class = toDraggable-box
function
- toDraggableCtrl = toExchangeable(target,cb_onpointerdown,cb_onpointermove,cb_onchanged) //target에 드래그 이벤트 설정
method
- toDraggableCtrl.enable() //드래그 이벤트 동작
- toDraggableCtrl.disable() //드래그 이벤트 중지
- toExchangeable.cb_onpointerdown = toDraggable.cb_onpointerdown
- toExchangeable.cb_onpointermove = toDraggable.cb_onpointermove
- toExchangeable.cb_onpointerup = toDraggable.cb_onpointerup
- function = toExchangeable.generate_cb_onpointerup(cb_changed) //cb_changed 를 기준으로 cb_onpointerup 함수를 만든다. 직접 사용할 필요 없다.
- toExchangeable.cb_changed(from:html_node,to;html_node); //이벤트 발생 node, to node 를 가져와서 처리
property
- toExchangeable.selectorHover = 'body.toDraggable-body-down .toDraggable-box-hover:not(.toDraggable-box-down)'; // cb_changed 로 동작시킬 대상 지정용
ex2 : toExchangeable
-
-
-
-