借助我发现的这篇文章-http://embed.plnkr.co/iy63pZ
，我在自己的应用程序中实现了拖放功能在此示例中，当我们拖放行时，将重新排列行的索引。我希望列排序顺序以类似的方式表现。因此，这对我来说非常有效。
我现在需要包括编辑排序顺序列的功能。因此，基本上，用户应该能够拖放/编辑网格中各行的排序顺序，并且这些行应按照以下任意一种分配给它们的新排序顺序的顺序进行重新排列方法。
代码类似于所指的插栓：http://embed.plnkr.co/iy63pZ
我对棱角还很陌生。任何帮助将不胜感激。谢谢！
这是我的代码：
自定义指令：
app.directive('droppable', ['$parse', function ($parse) {
return {
link: function (scope, element, attr) {
function onDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
//added undefined check
if (e.dataTransfer) {
e.dataTransfer.dropEffect = 'move';
}
//e.dataTransfer.dropEffect = 'move';
return false;
}
function onDrop(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
//added undefined check
if (e.dataTransfer) {
var data = e.dataTransfer.getData("Text");
}
//var data = e.dataTransfer.getData("Text");
data = angular.fromJson(data);
var dropfn = attr.drop;
var fn = $parse(attr.drop);
var rowDroppedAt = getParentByTagName(e.target, "tr").sectionRowIndex;
scope.$apply(function () {
scope[dropfn](data, rowDroppedAt);
});
}
function getParentByTagName(obj, tagName) {
tagName = tagName.toLowerCase();
while (obj != null && obj.tagName != null && obj.tagName.toLowerCase() !=
tagName) {
obj = obj.parentNode;
}
return obj;
}
element.bind("dragover", onDragOver);
element.bind("drop", onDrop);
}
};
}
]);
app.directive('draggable', function () {
return {
link: function (scope, elem, attr) {
elem.attr("draggable", true);
var dragDataVal = '';
var draggedGhostImgElemId = '';
attr.$observe('dragdata', function (newVal) {
dragDataVal = newVal; "0"
});
attr.$observe('dragimage', function (newVal) {
draggedGhostImgElemId = newVal;
});
elem.bind("dragstart", function (e) {
var sendData = angular.toJson(dragDataVal);
//added undefined check
if (e.dataTransfer) {
e.dataTransfer.setData("Text", sendData);
}
else if (e.originalEvent.dataTransfer) {
e.originalEvent.dataTransfer.setData("Text", sendData);
}
//e.dataTransfer.setData("Text", sendData);
var dragFn = attr.drag;
if (dragFn !== 'undefined') {
scope.$apply(function () {
scope[dragFn](sendData);
})
}
});
}
};
});
app.directive('angTable', ['$compile', '$timeout', 'PriorityFactory',
function ($compile, $timeout, PriorityFactory) {
var templateLoc = document.location.pathname == "/" ? "" : document.location.pathname + "/";
return {
restrict: 'E',
templateUrl: '../Scripts/tabletemplate.html',
replace: true,
scope: {
conf: "=",
swaprows: "=",
cellclick: "&"
},
controller: function ($scope) {
$scope.dragIndex = 0;
$scope.dragImageId = "dragtable";
$scope.handleDrop = function (draggedData, targetElem) {
function array_move(arr, old_index, new_index) {
if (Number(old_index) < new_index) {
for (var i = Number(old_index) ; i <= new_index; i++) {
$scope.conf.myData[i].isChanged = true;
$scope.conf.noRecordsEdited = false;
}
}
else if (Number(old_index) > new_index) {
for (var i = new_index ; i <= old_index; i++) {
$scope.conf.myData[i].isChanged = true;
$scope.conf.noRecordsEdited = false;
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
};
//Changed draggedData to $scope.dragIndex
if ($scope.swaprows == false) {
array_move($scope.conf.myData, $scope.dragIndex, targetElem);
}
else {
swapArrayElements($scope.conf.myData, draggedData, targetElem);
}
};
$scope.handleDrag = function (rowIndex) {
if (rowIndex !== null) {
$scope.dragIndex = rowIndex.replace(/["']/g, "");;
}
};
},
compile: function (elem) {
return function (ielem, $scope) {
$compile(ielem)($scope);
};
}
};
}
]);
HTML模板：
<div style="position:relative">
<!-- <table class="hidtable" id="dragtable" border="1">
<tr>
<td ng-repeat="head in conf.heads">{{(conf.myData[dragIndex])[head]}}</td>
</tr>
</table>
<table class="coverhidtable" border="1">
<tr>
<td ng-repeat="head in conf.heads">{{(conf.myData--<td ng-repeat="head in conf.heads">{{(conf.myData[dragIndex])[head]}}
</table>-->
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Sort Order</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowData in conf.myData" draggable drag="handleDrag" dragimage="{{dragImageId}}" dragdata="{{$index}}" droppable drop="handleDrop" style="cursor:move;pointer-events:all" ng-click="setSelectedRowColor(rowIndex)" ng-class="{'selected':conf.rowSelected[rowIndex]}">
<td ng-bind="rowData.Value1"></td>
<td ng-bind="rowData.Value2"></td>
<td>
<span>
<span ng-hide="editing">
{{$index+1}}<span ng-click="editing = true"><i class="icon-pencil"></i></span>
</span>
<span ng-show="editing">
<input type="text" ng-model="rowData.SortOrder">
<span ng-click="editing = false"><i class="icon-ok"></i></span>
</span>
</span>
</td>
</tbody>
</tr>
</table>
</div>
取得了一些进展：
通过单击，我已经能够使排序顺序单元格可编辑-以显示输入字段。如何实现类似于拖放的功能，以便在用户向行提供新的排序顺序值时对行进行重新排序。
例如，如果第1行（现在的排序顺序为1）的排序顺序为5，则2-5的行的排序顺序将减少1，而第1行将移至第5行的位置。 / p>
那可能是另一个自定义指令。任何帮助将不胜感激。谢谢。