使用HTML5和AngularJS拖动表格列

Question

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
    );
}   
};

});

在上面的代码片段中，我想创建一个具有列重新排序功能的表格，我已经成功将列头设置为可拖动，但是在拖动时只有列头的图像被拖动，我希望整个列的图片作为拖动图片。请问有什么建议吗？

- Asutosh

---

我认为你需要为每一列创建一个div。 - Lucius

谢谢您的回复，虽然我尝试过了，但我不想将每个div都显示给用户。 - Asutosh

Answer 1

以下解决方案适用于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

- Asutosh

Answer 2

如果你不想自己实现插件，可以选择以下插件：

1. http://ng-table.com/

2. http://ui-grid.info/

3. http://lorenzofox3.github.io/smart-table-website/

4. http://ekokotov.github.io/object-table/

它们都支持列重排和许多其他功能，我相信还有许多其他解决方案。

- Herbi Shtini

Answer 3

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

以下是HTML代码：

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

以下是JS代码：

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
    );
}   
};

});

所以我创建了一个宽度为200像素，背景颜色为白色的框，下面是“hidetable”元素，因此它对浏览器可见但对用户不可见。当拖动事件发生在任何列头元素时，“hidetable”元素被设置为拖动图像。

- Asutosh

---

@bmm6o 你能否具体说明你遇到了什么错误？ - Asutosh

也许我误解了应该发生的事情，但在Chrome 33中列不会重新排序。控制台没有错误。 - bmm6o

有人曾经搞定这个问题吗？我正在寻找这个功能，但是这个示例在Chrome中对我也没有任何用。 - Tim Hardy

我相信，这里的Asutosh就是那个在http://litutech.blogspot.nl/2014/02/an-angular-table-directive-having.html上写博客的人。那篇博客中的plunkr对我来说很好用，只不过我不得不将e.dataTransfer更改为e.originalEvent.dataTransfer。 - Mubin

Answer 4

这个拖放库会为你完成：

https://github.com/lorenzofox3/lrDragNDrop

只需将其包含在您的应用程序中，并使您的<th>说出这句话：

<th  lr-drag-src="headers" lr-drop-target="headers" ng-repeat="hd in heads" >

- Frazer Kirkman