angularjs之使用 HTML5 和 AngularJS 拖动表格列

http://jsfiddle.net/asutosh/82qum/

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

这里是 JS:

  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) { 
 
 
    e.dataTransfer.effectAllowed = 'move'; 
 
           // this.classList.add('drag'); 
            return false; 
        }, 
        false 
    ); 
 
    el.addEventListener( 
        'dragend', 
        function(e) { 
 
            this.classList.remove('drag'); 
            return false; 
        }, 
        false 
    ); 
}    
}; 
 
}); 

在上面的 fiddle 中，我想创建一个具有列重新排序的表，我可以将列标题设置为可拖动，但是在拖动时只有标题的图像被拖动，我希望整个列的图像应该像拖动图像，任何建议都会有所帮助。

请您参考如下方法:

以下方案适用于Chrome最新版本，本方案使用AngularJS 1.4版本实现:

代码的变化是:

var headerElem=e.target.closest('th'); 
          var textOfHeader=angular.element(headerElem).find("a"); 
          scope.$apply(function() { 
            scope[dropfn](data, textOfHeader[0]); 
          }); 

http://plnkr.co/VDygHR