JSFiddle - React, Tailwind, and code Playground

by asutosh

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 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>

JavaScript

var myApp=angular.module('myApp',[]);
myApp.controller('myCtrl',function($scope){
    $scope.handleDrag=function()
    {
       
    }
    
   
    $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) {
        // this gives us the native JS object
        var el = element[0];
         el.draggable=true;
                         
        el.addEventListener(
            'dragstart',
            function(e) {
             
               
                               
  // console.log(e.dataTransfer);            
//e.dataTransfer.addElement(angular.element('<h1>hii</h1>'));
               
               
                
  
          
 e.dataTransfer.effectAllowed = 'move';
                
               // this.classList.add('drag');
                return false;
            },
            false
        );

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