3

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

});

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

4

4 回答 4

5

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

于 2015-08-01T05:29:06.800 回答
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/

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

于 2017-03-06T12:34:37.903 回答
1

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'元素被设置为拖动图像。

于 2014-02-01T13:05:46.097 回答
0

这个拖放库将为您完成：

https://github.com/lorenzofox3/lrDragNDrop

只需将其包含在您的应用程序中，并让您<th>这样说：

<th  lr-drag-src="headers" lr-drop-target="headers" ng-repeat="hd in heads" >
于 2017-03-31T15:11:31.120 回答