ag-grid：使整行成为行拖动的夹点

Question

我正在使用 Vue 版本的 ag-grid 21.2.1 ( https://www.ag-grid.com/vue-getting-started/ ) 并实现了行拖动 ( https://www.ag-grid.com/ javascript-grid-row-dragging/ ) 在我们的一张桌子上。 一切似乎都很好，但现在我想让整行成为拖动的“抓地力”。 我尝试使用pointer-events: none on .ag-row并使本机 ag 握把项目更大且可点击，但这似乎不起作用：

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

有人在这方面取得了成功吗？

Answer 1

javascript 可能还有其他方法，但您可以使用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

Answer 2

请检查这个工作演示

---

首先，您需要在defaultColDef中设置rowDrag ，如下所示

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

然后你需要为其他人应用 CSS ag-icon-grip opactiy is 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" }
];