JSFiddle - React, Tailwind, and code Playground

by Milomir Topic

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app='myApp'>
    
<div ng-controller="myCtrl">
    
   <table ng-hide={{dragStart}} id="hidtable" border="4" >
       <thead>
           
           <th>{{dragHead}}</th>
       </thead>
       <tr ng-repeat="row in myData">
           <td>{{row[dragHead]}}</td>
       </tr>
    </table>
    <div class='dragstyle' id="coverup"></div>
    <table border="4">
        <thead>
            <th ng-repeat="hd in heads">
                <div draganddrop drag="handleDrag">{{hd}}</div>
            </th>
        </thead>
      <tr ng-repeat="row in myData">
        <td ng-repeat="hd in heads">
          {{row[hd]}}
        </td>
      </tr>
        
    </table>
    </div>

</div>

CSS

.dragstyle{
    background: white;
    width:200px;
    color:white;   
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
#hidtable{
  
   
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;  
}

JavaScript

var myApp=angular.module('myApp',[]);
myApp.controller('myCtrl',function($scope){
    $scope.handleDrag=function(columnName)
    {
       
      $scope.dragHead=columnName;
 
    };
   
    $scope.dragHead='name';
   
    $scope.heads=['name','age','company','tech'];

    $scope.myData=[{name:'Jay',age:27,company:'XYZ',tech:'Js'},{name:'Rayn',age:30,company:'XYZ',tech:'.net'}]    
});
myApp.directive('draganddrop',function(){
    return{
        scope:{
            drag:'='
    },  
        link: function(scope, element,attrs) {
       
        var el = element[0];
         el.draggable=true;
                         
        el.addEventListener(
            'dragstart',
            function(e) {
         
                 e.dataTransfer.effectAllowed = 'move';
                 var  columnName=e.target.innerHTML;                    
                scope.$apply(function(self){
                    console.log(self);
               scope.drag(columnName);
                
                });                 

                e.dataTransfer.setDragImage(document.getElementById('hidtable'), 0, 0);
              ;
                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                
                this.classList.remove('drag');
                
                return false;
            },
            false
        );
    }   
    };
    
});