안녕하세요 그레이프시티입니다.
문의하신 기능의 경우, Wijmo의 자체적인 기능보다는 HTML 이벤트와 관련된 내용이오니 업무에 참고 부탁드립니다. 문의에 대한 샘플 코드는 각 질문 답변 아래에서 확인할 수 있습니다.
1. target이 아닌 곳에 마우스를 올렸을 때 drop이 가능한 상태로 보이는 것을 막는 방법
=> 해당 dragover 이벤트에서 이벤트 설정을 아래와 같이 처리해보시기 바랍니다.
app.component.html
<wj-combo-box id="notTheTarget"></wj-combo-box>
app.component.ts
this._makeNotDropTarget(document.querySelector('#notTheTarget'));
private _makeNotDropTarget(s: HTMLElement) {
s.addEventListener('dragover', (e: DragEvent) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'none'
});
}
2. target이 아닌 곳에 drop했을 때 row index 값 입력을 막는 방법
=> target이 아닌 곳의 drop 이벤트에 대해서 preventDefault 메서드를 호출해보시기 바랍니다.
app.component.html
<wj-combo-box id="notTheTarget"></wj-combo-box>
app.component.ts
this._makeNotDropTarget(document.querySelector('#notTheTarget'));
private _makeNotDropTarget(s: HTMLElement) {
s.addEventListener('drop', (e: DragEvent) => {
e.preventDefault();
});
}
3. textarea가 target일 때 커서 위치에 drag한 데이터를 삽입하는 방법
=> drop 이벤트 내에서 textarea의 value에 데이터를 설정해주시기 바랍니다.
app.component.html
<textarea id="theTarget" cols="50" rows="10" value=""></textarea>
app.component.ts
this._makeDropTarget(document.querySelector('#theTarget'));
private _makeDropTarget(s: HTMLInputElement) {
s.addEventListener('drop', (e: DragEvent) => {
let dragRow = e.dataTransfer.getData('text');
if (dragRow != null) {
let item = this.flex.rows[parseInt(dragRow)].dataItem;
s.value = JSON.stringify(item)
alert('thanks for dropping row ' + JSON.stringify(item) + ' here.');
e.preventDefault();
}
});
}
4. textarea에 값이 입력되어 있고 textarea에 dragover한 상태로 특정 위치에 drop하였을 때 drop한 위치에 데이터를 삽입하는 방법
=> 해당 기능의 경우, textarea 요소에서 drop 이벤트를 처리하면 복잡한 작업이 되므로 FlexGrid의 'dragStart' 이벤트에서 전송할 데이터를 설정하고 textarea에서 드롭 작업을 자체적으로 처리할 수 있도록 하는 것을 추천드립니다.
app.component.html
<textarea id="theTarget" cols="50" rows="10" value=""></textarea>
app.component.ts
this._makeDragSource(this.flex);
this._makeDropTarget(document.querySelector('#theTarget'));
private _makeDragSource(s: wjcGrid.FlexGrid) {
(...)
s.addEventListener(s.hostElement, 'dragstart', (e: DragEvent) => {
let ht = s.hitTest(e);
if (ht.cellType == wjcGrid.CellType.RowHeader) {
s.select(new wjcGrid.CellRange(ht.row, 0, ht.row, s.columns.length - 1));
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', JSON.stringify(s.rows[ht.row].dataItem));
};
}, true);
}
private _makeDropTarget(s: HTMLInputElement) {
s.addEventListener('drop', (e: DragEvent) => {
let dragRowData = e.dataTransfer.getData('text');
alert('thanks for dropping row ' + dragRowData + ' here.');
});
}
다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일 2023-07-31 11:07 조회 292회
댓글 1건
작성일
1 답변
