Angular 그리드 셀 drop 위치 및 내용 삽입
페이지 정보
작성자 111234 작성일 2023-10-06 15:56 조회 441회 댓글 1건본문
관련링크
데모 페이지에 있는 '끌어서 놓기' 예제를 이용하여
wj-flex-grid 간에 행 끌기 기능을 구현하려고 합니다.
1. A그리드에서 특정 행 드래그를 시작해 B그리드에 드롭
2. B그리드 dragover 이벤트에서 현재 마우스 위치에 있는 셀의 편집모드를 활성화 (커서를 표시하려면 편집모드를 활성화해야할것같아 활성화 시킴)
3. 편집모드가 활성화된 셀 내에는 '가나다라' 라는 데이터가 입력되어 있고
4. 마우스 포인터가 '가나' 다음에 위치해 있으면 '가나'와 '다라' 사이에 커서가 표시되고, 마우스 움직임에 따라 '가나다라' 텍스트 내에서 커서 이동
( 그리드가 아닌 input으로 테스트 시 원하는 기능이 동작함. 값이 입력되어 있는 input(wj-combo-box)에 드래그하여 끌고 가면 마우스 위치에 커서가 생성되며 마우스 움직임에 따라 커서가 이동하고 drop하는 순간 해당 커서 위치에 드래그한 데이터가 삽입됨 <-- 이 기능을 그리드 셀에 동일하게 구현해야함 )
5. B그리드(셀)에 드롭하면 커서 위치에 데이터 삽입 (ex. 가나AA다라)
위 내용이 구현하려고 하는 전체적인 내용이고, 4번에 있는 커서 표시부터 이동, 삽입 기능이 구현되지 않아 문의드립니다.
편집모드인 셀에서 마우스 움직임에 따라 커서를 표시하고 움직일 수 있나요
(커서 표시를 위해 편집모드를 활성화하였는데 편집모드를 활성화하지 않고도 '가나'와 '다라' 사이에서 drop하면 '가나AA다라' 와 같이 데이터를 변경할 수만 있으면 됩니다. 텍스트 중간에 데이터 삽입을 위해서는 drop하는 순간 selectionStart 값 같은 position을 알아야 할 것 같은데 방법을 모르겠습니다...)
구현 방법이 있다면 가이드 요청드립니다.