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

【问题标题】：ag-grid: Make whole row a grip for row draggingag-grid：使整行成为行拖动的夹点
【发布时间】：2020-01-20 11:46:49
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript css vue.js ag-grid

【解决方案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;
}

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

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

【讨论】：

谢谢！在我的情况下，这个解决方案还没有奏效。但是由于您的 plunker 工作正常，我想这是由于我们自定义的 ag-grid 样式。我仍然想努力让它发挥作用。
我终于知道为什么它不起作用了——cellClass: drag-row` 在我扩展的 ag-grid-vue 组件中被替换了。现在完美运行，谢谢！

【解决方案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" }
];

【讨论】：

感谢您的回答！这也可以，但我更喜欢 @Ja9ad335h 的答案，因为它只使用一个 DOM 元素。
@low_rents 是的，如果您正在寻找DOM 级别那么很好，但是当您通过选择任何列拖动一行时，您将始终看到第一列文本。但在我的解决方案中，您不会只看到一个列名。它会显示触发的列文本。
是的，这是有道理的。但就我而言，无论哪种方式，我都会隐藏 DnD 幽灵标签。