Wijmo FlexGrid / Drag and Drop

Ref: http://wijmo.com/topic/flexgrid-drag-and-drop/
http://wijmo.com/topic/wijgrid-and-draggable-rows/
http://jsfiddle.net/Wijmo5/0z1ou6cn/
http://jsfiddle.net/tzd95q74/
//===================
<div class="container">

  <h1>
    Dragging Rows from the FlexGrid
  </h1>
  <p>
    You can use the HTML5 drag/drop API to implement row dragging
    from, into, or between FlexGrid controls.</p>
  <p>
    This simple example shows how you can drag rows from the
    grid into arbitrary elements. You can easily extend this
    to support move operations (by removing the row from the
    source grid when the operation is completed) or dropping
    into grids (by detecting the drop position and inserting
    new rows into the target grid).</p>

  <p>
    Drag rows from the grid by the row header:</p>
  <div id="theGrid"></div>

  <p>
    And drop them here:</p>
  <div id="theTarget" style="height:100px;background-color:#e0e0e0">
    Drop rows here...
  </div>
</div>

//===================
onload = function() {

    // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
      itemsSource: getData()
  });
 
  // allow dragging from the grid
  makeDragSource(theGrid);
 
  // allow dropping into target
  var theTarget = document.getElementById('theTarget');
  makeDropTarget(theTarget);

  // make grid rows draggable
  function makeDragSource(s) {
 
      // make rows draggable
        s.itemFormatter = function (panel, r, c, cell) {
        if (panel.cellType == wijmo.grid.CellType.RowHeader) {
          cell.textContent = (r + 1).toString();
        cell.draggable = true;
            }
        };

    // disable built-in row drag/drop
    s.hostElement.addEventListener('mousedown', function (e) {
        if (s.hitTest(e).cellType == wijmo.grid.CellType.RowHeader) {
          e.stopPropagation();
            };
        }, true);

    // handle drag start
    s.hostElement.addEventListener('dragstart', function (e) {
      var ht = s.hitTest(e);
      if (ht.cellType == wijmo.grid.CellType.RowHeader) {
          s.select(new wijmo.grid.CellRange(ht.row, 0, ht.row, s.columns.length - 1));
        e.dataTransfer.effectAllowed = 'copy';
        e.dataTransfer.setData('text', '');
        e.dataTransfer.setData('gridRow', ht.row);
            };
        }, true);
  }
 
  // enable drop operations on an element
  function makeDropTarget(s) {
        s.addEventListener('dragover', function (e) {
            var dragRow = e.dataTransfer.getData('gridRow');
        if (dragRow != null) {
          e.dataTransfer.dropEffect = 'copy';
        e.preventDefault();
            }
        });
    s.addEventListener('drop', function (e) {
            var dragRow = e.dataTransfer.getData('gridRow');
        if (dragRow != null) {
          var item = theGrid.rows[dragRow].dataItem;
          alert('thanks for dropping row ' +
            JSON.stringify(item) +
          ' here.');
            }
        });
    }

    // create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    return data;
    }
}