ag-grid：使整行成为行拖动的抓地力

Question

我在我们的一张桌子上使用 ag-grid 21.2.1 (https://www.ag-grid.com/vue-getting-started/) and implemented Row Dragging (https://www.ag-grid.com/javascript-grid-row-dragging/) 的 Vue 版本。一切似乎都很好，但现在我想将整行设为 "grip" 以便拖动。我尝试在 .ag-row 上使用 pointer-events: none 并使原生 ag grip 项目更大且可点击，但这似乎不起作用：

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

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

Answer 1

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
  },
  // ...
];

工作的 plunker https://next.plnkr.co/edit/naFYtZTBZUJJOCfB

Answer 2

请检查此工作demo

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

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" }
];

ag-grid：使整行成为行拖动的抓地力

ag-grid: Make whole row a grip for row dragging

javascript

css

vue.js

ag-grid