Angular JS - редактировать функциональность с помощью функции Drag Drop в сетке

Question

Я реализовал функцию перетаскивания в моем приложении с помощью этой статьи, которую я узнал - 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-й строки.

Вероятно, это будет другая специальная директива. Любая помощь будет оценена. Спасибо.