Kendo/Angular drag and drop header

<!DOCTYPE html>
<html>

  <head>
    <link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
    <link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp">
    <div ng-controller="myCtrl as controller">
      <p>The kendo grid headers can be dragged but need to be placed in the same way as the basic table (not sure why but 
      in plunker the k-drop="onDrop" does not work so it will not populate the input field)</p>
      
      <div style="margin: 20px 0">
        <label for="test2">Kendo grid Draggable header test</label>
        <input type="text" id="test2" class="form-control dropTarget" name="test" placeholder="Input text" kendo-droptarget k-drop="onDrop">
      </div>
      

      <div id="grid" style="margin-top: 20px"></div>
      
    </div>
    <script data-require="jquery@*" data-semver="1.10.2" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="kendoUI@*" data-semver="2016.2.504" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="kendoUI@*" data-semver="2016.2.504" src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

var myCtrl = function($scope) {
  'use strict';
  var self = this;
  
  // START html datatransfer drag

  document.addEventListener("dragstart", function( event ) {
      var text = event.target.innerHTML;
      event.dataTransfer.setData('text/plain', '['+ text +']');
      console.log(event);
      // without transparency a border shows up on the drag
      event.target.style.opacity = 0.5;
  }, false);
  
  document.addEventListener("drop", function( event ) {
    console.log(event)
    if ( event.target.id !== "test1" ) {
        event.preventDefault();
    }
  }, false);

  document.addEventListener("dragend", function() {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);


  // END html datatransfer drag
  
  // START Kendo drag and drop
  
  this.input = '';

  var val = '';
  var dragged;

  $scope.onDragStart = function(e) {
      val = '[' + $(e.target).data('field') + ']';
      //console.log(e.target);
      dragged = e.target;
  };

  $scope.draggableHint = function(e) {
      return e.clone().css({"background": "transparent", "font-weight": "normal"});
  };

  $scope.onDrop = function(e) {
      console.log("drop2");
      console.log(val);
      console.log(e.toElement.value);
      e.toElement.value += val;
  };

  var dataSource = new kendo.data.DataSource({
      data: [
          { "Area": 10, "Height": 10, "Width": 10, "Volume": 10 },
          { "Area": 20, "Height": 20, "Width": 20, "Volume": 20 },
      ],
      pageSize: 5
  });

  var grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      //selectable: "multiple cell",
      //allowCopy: true,
      columns: [
          { field: "Area" },
          { field: "Height" },
          { field: "Width" },
          { field: "Volume" }
      ]
  }).data("kendoGrid");

  $(grid.element).kendoDraggable({
      // to drag the table row filter tr, eg. "th, tr"
      filter: "th",
      hint: $scope.draggableHint,
      dragstart: function (e) {
          $scope.onDragStart(e);
          
      }

  });
  
  $('#test2').kendoDropTarget({});

// END Kendo drag and drop

};

myCtrl.$inject = ['$scope'];
angular.module('myApp', []).controller('myCtrl', myCtrl);

body{
  margin: 0 0 0 10px;
  width: 50%;
}

#grid {
  margin-top: 10px;
}



.table-grid  {
    border-collapse:collapse;
    border-spacing:0;
    margin:20px 0;
    width: 100%;
}

.table-grid td{
    font-size:12px;
    padding:5px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;

}
.table-grid th{
    font-size:12px;
    font-weight:normal;padding:5px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}