Drag and drop from grid to another DIV

Drag and drop selected rows or rows within the grid to another DIV. When you drag grid data and drop it into the right div area, the value is displayed.

Drag and drop settings

Set it to a grid so that you can use the drag and drop function from the grid to other ELEMENTs.

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;
   }
}
 

How to use drag and drop

• The cursor changes so that you can move it when you hover the mouse over the cell to be moved in the selection area.
• When selecting a range, the cursor changes so that it can be moved by hovering the mouse to the location in front of the selected cell.
• When using a shortcut key, the cursor changes so that it can be moved by hovering over the area selected for focus and scope.
• Shortcut keys: Ctrl + Alt (windows), command + options (mac)
• To move a row, you must drag while the mouse cursor has changed.