Wijmo 5 - Dragging rows from the grid

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.24/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.24/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.24/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.24/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.24/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">


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

  <p>Drag rows from the grid by the row header:</p>
  <wj-flex-grid items-source="data" initialized="makeDraggable(s,e)">
  </wj-flex-grid>

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

JavaScript

var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {

  // make row headers draggable
  $scope.dragRowHT = null;

  function GetHTMLContent(flexgrid, e) {
    var contentstr = "";
    var ht = flexgrid.hitTest(e);
    var TEMP = document.createElement("div");
    TEMP.innerHTML = flexgrid.cells.hostElement.innerHTML;
    var dragRow = ht.row;
    var totalscolumns = flexgrid.columns.length;
    var startrow = dragRow * totalscolumns;
    var contentstr = "";
    for (var i = startrow; i < startrow + totalscolumns; i++) {
      contentstr = contentstr + '<div style="float:left;padding:5px">' + TEMP.children[i].innerHTML + '</div>';
    }
    return contentstr;
  }

  $scope.makeDraggable = function(s, e) {

    var isIE = (typeof document.createElement("span").dragDrop === "function");
    var createImage = function(x, y, offsetX, offsetY, content) {
        var dragImage = document.createElement("div");
        dragImage.innerHTML = content;
        dragImage.style.position = 'absolute';
        dragImage.style.pointerEvents = 'none';
        dragImage.style.top = Math.max(0, y - offsetY) + "px";
        dragImage.style.left = Math.max(0, x - offsetX) + "px";
        dragImage.style.color = 'white';
        dragImage.style.background = 'black';
        //dragImage.style.marginLeft="-1000px";

        document.body.appendChild(dragImage);
        setTimeout(function() {
          node.style.visibility = "hidden";
        });
        return dragImage;
      }
      
      // make row headers draggable
    s.itemFormatter = function(panel, r, c, cell) {
      if (panel.cellType == wijmo.grid.CellType.RowHeader) {
        cell.textContent = (r + 1).toString();
        cell.draggable = true;
      }
    };


    var dragRow = null;
    if (isIE) {
      s.hostElement.addEventListener('mousedown', function(e) {
        s.focus();
        var ht = s.hitTest(e);
        $scope.dragRowHT = ht
        if...