拖動使用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 
    ); 
} 
}; 

}); 

在上述撥弄我要創建具有重新排序列表，我我可以將列標題設置爲可拖動，但拖動時只拖動標題的圖像，我希望整個列的圖像應該作爲拖動圖像來顯示，任何對此的建議將會有所幫助。

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

}); 

於是就這樣我有C將一個寬度爲200px並且背景顏色爲白色的盒子重新命名爲「可隱藏」元素，因此它對瀏覽器可見，但對用戶不可見。

當任何列頭元素髮生拖動事件時，將「隱藏」元素設置爲拖動圖像。

Answer 2

以下解決方案可與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

Answer 3

如果你想使用插件而不是自己實現它，您可以選擇：

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/

它們都支持列重新排序和很多其他的功能，我相信有很多其他的解決方案的周圍。

Answer 4

這個拖放庫會爲你做它：

https://github.com/lorenzofox3/lrDragNDrop

就包括在您的應用程序，讓你的<th>這樣說：

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