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

我使用的是ag grid 21.2.1（）的Vue版本，并在我们的一个表上实现了行拖动（）。一切似乎都很顺利，但现在我想让整行成为一个“抓地力”，以便拖动。 我尝试在

.ag row

上使用

指针事件：none

，并使本机ag夹点项目更大且可单击，但这似乎不起作用：

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

---

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

使用

javascript

可能还有其他方法，但您可以使用

css

如下所示

css

js

---

工作槽

请检查此工作槽

---

首先，您需要在

defaultColDef

中进行设置，如下所示

this.defaultColDef={
没错，
宽度：150，
可排序：是的，
过滤器：真
};

然后，您需要为其他人应用CSS

ag图标夹点

opactiy为

0

，下面的第一列除外

.ag图标夹点{
位置：绝对位置；
指针事件：自动；
排名：0；
不透明度：0；
宽度：100%；
}
//第一列的不透明度设置为1
.第一个拖动列.ag图标夹点{
不透明度：1；
}

在vue组件内部，需要添加

cellClass

以显示第一列拖动图标。如下

this.columnDefs=[
{字段：“运动员”，单元类：'first drag column'，}，
{字段：“国家”}，
{字段：“年”}，
{字段：“日期”}，
{字段：“运动”}，
{字段：“黄金”}，
{字段：“银”}，
{字段：“青铜”}
];

谢谢！就我而言，这个解决方案到目前为止还没有成功。但既然你的plunker可以工作，我想这是因为我们定制了ag网格的样式。我仍然想让它工作。我终于找到了它不工作的原因-在我的ag grid vue组件扩展中，

cellClass:

drag row`被替换。现在它工作得很好，谢谢！谢谢你的回答！这也可以，但我更喜欢@Ja9ad335h的答案，因为它只使用一个DOM元素。@low\u如果您要查找

DOM

level，则选择“是”，但当您通过选择任何列拖动行时，您将始终看到第一列文本。但在我的解决方案中，您不会只看到一个列名。它将显示触发的列文本。是的，这是有意义的。但在我的情况下，我隐藏的DnD鬼标签的任何方式。

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