
# Drag and drop between grids

Move selected rows or rows within a grid to another grid by dragging and dropping them.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView: gridView1, dataProvider: dataProvider1 } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    movable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 25
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

const { gridView: gridView2, dataProvider: dataProvider2 } = RealGrid.createGrid('realgrid2', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true,
    movable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 25
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView1;
window.dataProvider = dataProvider1;
window.gridView2 = gridView2;
window.dataProvider2 = dataProvider2;

function setDropMode() {
  var dropMode = document.getElementById('dropMode').value;
  gridView1.dataDropOptions.dropMode = dropMode;
  gridView2.dataDropOptions.dropMode = dropMode;
}

function setDropCallback() {
  var checked = document.getElementById('checkbox_DropCallback').checked;
  if (checked) {
    gridView2.dataDropOptions.callback = function (source, sourceItems, target, targetItem) {
      for (var i = 0; i < sourceItems.length; i++) {
        var r = source.getDataRow(sourceItems[0]);
        var ds = source.getDataSource();
        var row = ds.getJsonRow(r);
        if (targetItem >= target.getItemCount()) {
          target.getDataSource().addRow(row);
        } else {
          r = target.getDataRow(targetItem);
          target.getDataSource().insertRow(r, row);
        }
      }
    };
  } else {
    gridView2.dataDropOptions.callback = null;
  }
}
```

### Drag and drop settings

Set this for each grid so that you can use the drag and drop function between grids.

```js
gridView.editOptions.movable = true;

gridView2.editOptions.movable = true;
```

```js
var dropMode = document.getElementById("dropMode").value
gridView.dataDropOptions.dropMode = dropMode //copy, move
gridView2.dataDropOptions.dropMode = dropMode //copy, move
```

### 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.