Drag from grid to grid

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div style="position:relative">
  <div id="mainOffice" style="width: 400px;float: left;"></div>
  <div id="newOffice" style="float: left;margin-left: 10px;"></div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {

  new FancyGrid({
    emptyText: 'Drop items to display',
    title: 'London Office',
    renderTo: 'mainOffice',
    theme: 'extra-gray',
    width: 400,
    height: 500,
    data: data,
    selModel: 'rows',
    trackOver: true,
    droppable: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      editable: true,
      vtype: 'notempty'
    },
    columns: [{
      type: 'rowdrag'
    }, {
      type: 'select'
    }, {
      index: 'id',
      width: 40,
      type: 'number'
    }, {
      title: 'Name',
      render(o) {
        o.value = `${o.data.name} ${o.data.surname}`;

        return o;
      }
    }, {
      index: 'birthday',
      title: 'Birthday',
      type: 'date',
      width: 100
    }, {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'England', 'Canada', 'Germany']
    }, {
      index: 'position',
      title: 'Position',
      width: 100
    }, {
      index: 'hour',
      type: 'currency',
      title: 'Hour rate',
      width: 70
    }, {
      index: 'active',
      type: 'checkbox',
      title: 'Active?',
      width: 60
    }, {
      title: 'email',
      index: 'email',
      width: 150
    }]
  });

  new FancyGrid({
    emptyText: 'Drop items to display',
    theme: 'extra-gray',
    title: 'Edinburgh office',
    renderTo: 'newOffice',
    width: 400,
    height: 500,
    data: {
      fields: ['id', 'name', 'surname', 'birthday', 'country', 'position', 'hour', 'active', 'email'],
      items: []
    },
    selModel: 'rows',
    trackOver: true,
    droppable: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      editable: true,
      vtype: 'notempty'
    },
    columns: [{
      type: 'rowdrag'
    }, {
      type: 'select'
    }, {
      index: 'id',
      width: 40,
      type: 'number'
    }, {
      title: 'Name',
 ...