Javascript 拖放表列_Javascript_Angularjs_Drag And Drop

Javascript 拖放表列

javascript angularjs

Javascript 拖放表列,javascript,angularjs,drag-and-drop,Javascript,Angularjs,Drag And Drop,我正在使用angularjs，并创建了一个由scope对象填充的表如果我能设法添加一个“drag n drop”函数，那就太酷了，我指的是改变列的顺序，而不是行的顺序我该怎么做 {{getCellValue（行、列）} 列{{$index}:{{{c} console.clear（）； var app=angular.module（'plunker'，[]）； app.controller（'MainCtrl'，函数（$scope，$filter，$parse）{ $scope.g

我正在使用angularjs，并创建了一个由scope对象填充的表

如果我能设法添加一个“drag n drop”函数，那就太酷了，我指的是改变列的顺序，而不是行的顺序

我该怎么做


{{getCellValue（行、列）}






列{{$index}:{{{c}
console.clear（）；
var app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope，$filter，$parse）{
$scope.getCellValue=函数（行、列）{
var getter=$parse（column.value）；
返回吸气剂（row）；
//或者：
//返回$parse（column.value）（行）；
};
$scope.columnsTest=[{
id:'Value1'，
核对：对，
值：“Value1”
}, {
id:'Value2'，
核对：对，
值：“Value2”
}, {
id:'Value3'，
核对：对，
值：“Value3”
}];
$scope.rows=[{
id:1，
“值1”：911，
“价值2”：20，
“价值3”：20
}, {
id:2，
“价值1”：200，
“价值2”：20，
“价值3”：20
}];
});

为jQuery寻找一个具有此功能的插件。@epascarello我想使用angularjs，而不是一些jQuery插件。我试过使用，但当电池在哪里时，它没有很好地工作updating@JohannesJander非常感谢。我会检查的out@emptyman这需要某种JavaScript来完成。Angular/HTML中没有内置任何东西可以实现这一点。

<!doctype html>
<html ng-app="plunker">

<head>
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng:controller="MainCtrl">
<table border="1">
  <thead style="font-weight: bold;">
    <tr>
      <th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columnsTest" ng-if="column.checked">
        {{ getCellValue(row, column) }}
      </td>
    </tr>
  </tbody>
</table>

<br>
<br>
<br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>

<script>
console.clear();

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter, $parse) {

  $scope.getCellValue = function(row, column) {

    var getter = $parse(column.value);
    return getter(row);

    // Alternatively:
    // return $parse(column.value)(row);
  };

  $scope.columnsTest = [{
    id: 'Value1',
    checked: true,
    value: 'Value1'
  }, {
    id: 'Value2',
    checked: true,
    value: 'Value2'
  }, {
    id: 'Value3',
    checked: true,
    value: 'Value3'
  }];

  $scope.rows = [{
    id: 1,
    "Value1": 911,
    "Value2": 20,
    "Value3": 20
  }, {
    id: 2,
    "Value1": 200,
    "Value2": 20,
    "Value3": 20
  }];
});
</script>
</body>

</html>