위젯빌더 제작 중간 점검

쉬엄쉬엄 제작 중인 위젯 빌더 컴포넌트.

요즘은 모바일 동작 구현을 시도하고 있습니다.

jQuery UI를 touch 이벤트로 변환시켜주는 라이브러리도 있긴 하지만, 제 경우엔 이벤트 버블링이 심하고 원하는 동작이 구현되지 않는 부분도 있어서 일반적인 js로만 시도를 하고 있습니다.

근데 이게 꽤 공부도 되고 끝없는 시행착오와 실습이 되네요ㅜㅜ

......

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

위젯 빌더의 첨부파일 섬네일의 삽입 시퀀스도 dragstart, drop 이벤트 사용하였습니다.

여기를 참조 https://xetown.com/topics/1190672

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

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

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

... 과연 성공할 수 있을지 후우우우ㅡ