onStartDrag (event)

시트 내 행(들)이 드래그되기 전에 호출됩니다. 드래그를 취소하거나, 드래그 표시용 HTML을 지정할 수 있습니다.

IBSheet 드래그 이벤트

시트 내 혹은 시트 간 행 드래그 이벤트입니다.
시트 간 이동 시, 모든 이벤트(onStartDrag, onEndDrag, onAfterRowMoveToSheet, onDragFinish)는 드래그 시작 시트에서만 발생합니다.

• 이벤트 발생 순서:
  onStartDrag → onEndDrag → onAfterRowMoveToSheet → onDragFinish

Syntax

    onStartDrag : function(paramObject) {

    }
or
    sheet.bind("onStartDrag" , function(paramObject) {});

Parameters

Return

mixed(number | string)

• true를 리턴해도 내부적으로 1과 동일하게 처리됩니다.
• string을 리턴하면 기본 Drag UI 대신 해당 HTML이 표시됩니다.

Example

options.Events = {
    onStartDrag:function(evtParam){
      var sheet = evtParam.sheet;
      
      // 단일 행일 경우 rows 배열이 없으므로 row 객체 사용
      const rowsToCheck = evtParam.rows && evtParam.rows.length ? evtParam.rows : [evtParam.row];

      // 특정 행 조건에서 드래그 취소
      for (let i = 0; i < rowsToCheck.length; i++) {
          const rowData = rowsToCheck[i];
          if(sheet.id === 'LeftSheet' && rowData.sPos === '대표이사'){
              sheet.showMessageTime('대표이사는 이동할 수 없습니다.', 800);
              return true;  // 드래그 취소
          }
      }

    if (evtParam.more) {
      // 복수행일때만 드래그 표시용 HTML
      const firstRow = rowsToCheck[0];
      const count = rowsToCheck.length;

      return `
        <div style="
          padding:8px 12px;
          background:#1976d2;
          color:#fff;
          font-weight:bold;
          border-radius:8px;
          box-shadow:0 4px 10px rgba(0,0,0,0.3);
          white-space:nowrap;
        ">
          ${firstRow.sName} 외 ${count - 1}건 이동
        </div>
      `;
  
      }
    }
}

Try it

• Demo of onStartDrag

Read More

• CanDrag cfg
• DragCopy cfg
• SelectingCells cfg
• onEndDrag event
• onAfterRowMoveToSheet event
• onDragFinish event

Since