Wijmo 5 [Flex Grid]

Drag and Drop rows from cell content and

HTML

<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.188/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl as form">

        <h1>Dragging rows from the grid</h1>

        <p>Drag rows from the grid by data cells:</p>
        <wj-flex-grid items-source="form.data" allow-dragging="Columns" initialized="form.makeDraggable(s,e)">
        </wj-flex-grid>
    </div>

JavaScript

var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
    var form = this;
    this.makeDraggable = function (s, e) {
        s.itemFormatter = function (panel, r, c, cell) {
            if (panel.cellType == wijmo.grid.CellType.Cell) {
                cell.draggable = true;
                cell.droppable = true;
            }
        };
        s.hostElement.addEventListener('mousedown', function (e) {
            if (s.hitTest(e).cellType == wijmo.grid.CellType.Cell) {
                e.stopPropagation();
            }
            ;
        }, true);
        var dragRow = null;
        var dragColumn = null;
        var dropRow = null;
        s.hostElement.addEventListener('dragstart', function (e) {
            dragRow = null;
            var ht = s.hitTest(e);
            if (ht.cellType == wijmo.grid.CellType.Cell) {
                dragRow = ht.row;
                e.dataTransfer.effectAllowed = 'copy';
                e.dataTransfer.setData('text', '');
            }
            ;
        });
        s.hostElement.addEventListener('dragover', function (e) {
            if (dragRow != null) {
                var ht = s.hitTest(e);
                if (ht.cellType == wijmo.grid.CellType.Cell) {
                    dropRow = ht.row; //console.log(dropRow);
                }
                e.dataTransfer.dropEffect = 'copy';
                e.preventDefault();
            }
        });
        // Array  to contain sorted rows detail
        var sortedRowList = [];

        s.hostElement.addEventListener('drop', function (e) {
            if (dragRow != null) {
                var ddata = {};
                ddata.country = s.itemsSource[dropRow].country;
                ddata.downloads = s.itemsSource[dropRow].downloads;
                ddata.sales = s.itemsSource[dropRow].sales;
                ddata.expenses = s.itemsSource[dropRow].expenses;
                s.itemsSource[dropRow].country = s.itemsSource[dragRow].country;
  ...