RealGrid2 가이드
Drag And Drop
Grid To Div

그리드에서 다른 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)
  • 행을 이동을 시키기 위해서는 마우스 커서가 변경된 상태에서 드래그를 해야합니다.