ag-grid: сделать целый ряд захватом для перетаскивания строк

Question

Я использую версию Vue ag-grid 21.2.1 (https://www.ag -grid.com / vue-Getting-Start / ) и реализовал перетаскивание строк (https://www.ag -grid.com/javascript-grid-row-dragging/) на одной из наших таблиц.Кажется, все работает хорошо, но теперь я хочу сделать весь ряд «захватом» для перетаскивания.Я попробовал с pointer-events: none на .ag-row и сделать элемент ручки сцепления больше и кликабельнее, но, похоже, это не сработало:

.ag-icon-grip {
    position: absolute;
    width: 600px;
    pointer-events: auto;
}

У кого-нибудь был успех?

Answer 1

Пожалуйста, проверьте этот рабочий демо

---

Сначала вам нужно установить rowDrag в defaultColDef, как показано ниже

this.defaultColDef = {
  rowDrag: true,
  width: 150,
  sortable: true,
  filter: true
};

И после этого вам нужно применить CSS для других ag-icon-grip opactiy 0 за исключением первого столбца, как показано ниже

.ag-icon-grip {
  position: absolute;
  pointer-events: auto;
  top: 0;
  opacity: 0;
  width: 100%;
}
//Setting opacity for first column is 1
.first-drag-column .ag-icon-grip {
  opacity: 1;
}

И внутри компонента vue, необходимо добавить cellClass к отображению первого столбцаперетащите значок.Как ниже

this.columnDefs = [
  {field: "athlete",cellClass: 'first-drag-column',},
  { field: "country" },
  { field: "year" },
  { field: "date" },
  { field: "sport" },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" }
];

Answer 2

Могут быть и другие методы с javascript, но вы можете сделать это с css, как показано ниже

css

.drag-row {
    overflow: unset !important;
}
.drag-row .ag-cell-value {
    padding-left: 24px;
}
.drag-row .ag-row-drag {
    position: absolute;
    width: 1200px;
    z-index: 2;
}

js

this.columnDefs = [
  {
    field: "athlete",
    cellClass: 'drag-row',
    rowDrag: true
  },
  // ...
];

работаетПлункер https://next.plnkr.co/edit/naFYtZTBZUJJOCfB