ui-grid-draggable-rows - 行不移动答案

【问题标题】：ui-grid-draggable-rows - row doesn't moveui-grid-draggable-rows - 行不移动
【发布时间】：2016-02-14 04:29:31
【问题描述】：

我正在尝试实现ui-grid-draggable-rows，以便可以在我的 ui-grid 中移动行。我正在使用来自demo 的 JavaScript。我可以成功拖动该行并将其放到新位置，但是拖动的行不会停留在其新位置。拖动后，网格内容和之前一样。

正如您在控制台中看到的，from 和 to 索引（通过拖动行创建）是正确的。

有没有其他人遇到过这种情况？有解决办法吗？

我的 HTML：

<div id="container" class="PageContainer">
    <h2 class="mainHeader">Variables</h2>
    <div class="OneOfTwo">
        <div class="gridHalf" ui-grid="gridVariableGroups" ui-grid-selection ui-grid-draggable-rows ng-hide="loading"></div>
    </div>
    <h2 class="footer">
        <button ng-click="editTask();" ng-disabled="loading">Edit</button>
    </h2>
</div>

这是我的角度控制器中的代码：

function variableGroupsController($scope, $http, $routeParams, uiGridConstants) {
    $scope.loading = 1;

    $scope.myData = [{ 'Name': 'Name1', 'Snuh': 'Snuh1' },
                  { 'Name': 'Name2', 'Snuh': 'Snuh2' },
                  { 'Name': 'Name3', 'Snuh': 'Snuh3' }];

    $scope.gridVariableGroups = {
        multiSelect: false,
        enableRowHeaderSelection: false, // We don't want to have to click a row header to select a row. We want to just click the row itself.
        // Got the row template from https://github.com/cdwv/ui-grid-draggable-rows:
        rowTemplate: '<div grid="grid" class="ui-grid-draggable-row" draggable="true"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'custom\': true }" ui-grid-cell></div></div>',
        columnDefs: [{ field: 'Name', displayName: 'Name', width: "90%", resizable: true, sort: { direction: uiGridConstants.ASC, priority: 1 } },
                     { field: 'Snuh', displayName: 'Snuh', width: "8%" }]
    };

    $scope.gridVariableGroups.data = $scope.myData;

    $scope.loading = 0;

    $scope.gridVariableGroups.onRegisterApi = function (gridApi) {
        gridApi.draggableRows.on.rowDropped($scope, function (info, dropTarget) {
            console.log("Dropped", info);
        });
    };
}

【问题讨论】：

您应该尝试在 plunker 中重现此内容，这样其他人会更容易发现发生了什么。

标签： javascript asp.net angularjs angular-ui-grid

【解决方案1】：

不确定您是否已经解决了该问题，但您似乎对列进行了排序。排序保持有效（猜测 ui-grid 正在使用 AngularJS 双向数据绑定来实现这一点），但移动是一次性操作。因此，即使您的举动有效，它也会通过排序立即“纠正”，您将无法注意到它。

【讨论】：