Drag from grid to custom element

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="my-drop-el" style="border: 1px dashed gray; width: 150px; height: 150px; float: left;margin-left: 10px;"></div>
</div>

JavaScript

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

  let grid = new FancyGrid({
    emptyText: 'Drop items to display',
    title: 'London Office',
    renderTo: 'mainOffice',
    theme: 'extra-gray',
    width: 400,
    height: 500,
    data: data,
    selModel: {
    	type: 'rows',
      memory: true
    },
    trackOver: true,
    defaults: {
      type: 'string',
      width: 100,
      sortable: true,
      resizable: true,
      editable: true,
    },
    dropZone(el) {
      let dropZoneEl = document.getElementById('my-drop-el');

      if (el.id === 'my-drop-el') {
        dropZoneEl.style.borderWidth = '2px';
        return true;
      }

      dropZoneEl.style.borderWidth = '1px';
      return false;
    },
    dropZoneFn: function(data) {
      let dropZoneEl = document.getElementById('my-drop-el');

      grid.remove(data);
      grid.clearSelection();

      dropZoneEl.style.borderWidth = '1px';
      dropZoneEl.innerHTML = data.length;
    },
    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
    }]
  });

});

var data = [{
    id: 1,
    name: 'Ted',
    surname: 'Smith',
    email: 'ted.smith@fancygrid.com',
    position: 'Java Developer',
    birthday: '6/22/1953',
    country:...