Angularjs UI网格常用列标题拖动

Question

我正在使用AngularJS UI Grid。我已经改变了标题模板以实现常见的列标题。但是，一旦我自定义标题模板，列拖动就无法正常工作。下面是我的UI网格配置

  $scope.gridOptions = {
    enableFiltering: true,
    enableGridMenu: true,
    paginationPageSizes: [5, 10, 15],
    paginationPageSize: 15,
    treeRowHeaderAlwaysVisible: false,
    headerTemplate: 'header-template.html',
    category: [
      { name: 'machine', visible: true, showCatName: false },
      { name: 'dep', visible: true, showCatName: false },
      { name: 'div', visible: true, showCatName: false },
      { name: 'productive', visible: true, showCatName: true }
    ],
    enableSorting: false,
    multiSelect: true,
    columnDefs: [
      { name: 'machine', width: '15%', category: "machine" },
      { name: 'dep', width: '10%', category: "dep" },
      { name: 'div', width: '10%', category: "div" },
      { name: 'util', width: '10%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.SUM },
      {
        name: 'prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG,
        filters: [
          {
            condition: uiGridConstants.filter.GREATER_THAN,
            placeholder: 'Greater than'
          },
          {
            condition: uiGridConstants.filter.LESS_THAN,
            placeholder: 'Less than'
          }
        ]
      },
      { name: 'non prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG }
    ],
    onRegisterApi: function (gridApi) {
      $scope.gridApi = gridApi;
    }
  }; 

请参阅

中的完整代码

http://plnkr.co/XMMCTA?p=info 

知道如何使用自定义标题实现列拖动吗？