작업
2019.03.23 18:39

모바일 드래그 앤 드롭

조회 수 57 추천 수 0 댓글 0
Extra Form

일반적으로 드래그 앤 드롭은 html5 api의 dragstart, dragenter, dragover, dragend, 그리고 drop 등의 이벤트를 사용한다.

위젯 빌더의 첨부파일 섬네일의 삽입 시퀀스도 dragstart, drop 이벤트 사용하였다. 여기를 참조 https://aporia.blog/widget_builder/16306


그런데 이게 모바일에선 구현되지 않는 문제가 있다. 그래서 touchstart, touchmove, touchend 등의 이벤트로 드래그 앤 드롭 이벤트를 대체해줘야 한다.

물론 동작 자체가 동일한 것은 아니어서 ,터치포인트의 좌표를 구해서 현재 위치의 요소를 식별해주거나 하는 동작들을 더해줘야 한다.

현재는 데스크탑에서의 드래그와 드롭 기능을 모바일 터치로 옮기는 데 성공했으며(심지어 ck에디터 인라인 에디터에도), touchmove시 droppable 요소의 하이라이트 효과, touchend 이후 커서 포인트에 따른 텍스트/이미지 삽입, 텍스트/이미지 삽입 후 undo/redo enabling 등의 후속작업이 남아 있다.

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 용량 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )