그리드에서 다른 DIV로 드래그 앤 드롭
그리드 내에서 선택된 행, 행들을 다른 DIV로 드래그 앤 드롭.
그리드 데이터를 드래그해서 오른쪽 div영역에 드롭 시 값이 표시됩니다.
드래그 앤 드롭 설정
그리드에서 다른 ELEMENT로 드래그 앤 드롭 기능을 사용할 수 있도록 그리드에 설정합니다.
gridView.editOptions.movable = true;
gridView.dataDropOptions.dropOtherElement = true;
gridView.dataDropOptions.dragCallback = (source, items, target) => {
if (!(target instanceof HTMLDivElement)) {
return false;
}
if (target.id === "div1") {
return items.length > 1;
}
return true;
}
gridView.dataDropOptions.callback = (source, items, target, targetIndex, targetCell) => {
if (!(target instanceof HTMLDivElement)) {
return;
}
target.textContent = "";
if (target.id === "div1") {
items.forEach((itemIndex) => {
const value = source.getValue(itemIndex, "KorName");
target.innerHTML += value + "<br/>";
});
} else {
var text = gridView.copyToClipboard(gridView.getSelection(), false);
target.textContent = text;
}
}
드래그 앤 드롭 사용방법
- 선택 영역의 이동시킬 셀 위치에 마우스 hover시 이동할 수 있도록 커서가 변경됩니다.
- 범위 선택 시 선택된 셀 앞부분 위치에 마우스 hover시 이동할 수 있도록 커서가 변경됩니다.
- 단축키 사용시 포커스 및 범위선택 된 영역에 마우스 hover시 이동할 수 있도록 커서가 변경됩니다.
- 단축키:
Ctrl
+Alt
(windows),command
+options
(mac) - 행을 이동을 시키기 위해서는 마우스 커서가 변경된 상태에서 드래그를 해야합니다.