ag-grid:使整行成为拖动行的手柄 [英] ag-grid: Make whole row a grip for row dragging

问题描述

我正在使用Vag版本的ag-grid 21.2.1( https://www.ag-grid.com/vue-getting-started/)并实现了行拖动( .ag-row 上使用 pointer-events:none ，并使本机ag抓取项更大且可单击，但这似乎不起作用:

  .ag-icon-grip {位置:绝对；宽度:600像素；指针事件:自动；} 

有人在这方面有任何成功吗?

解决方案

javascript 可能还有其他方法，但是您可以使用 css 来实现，如下所示

css

  .drag-row {溢出:未设置！重要；}.drag-row .ag-cell-value {padding-left:24px;}.drag-row .ag-row-drag {位置:绝对；宽度:1200px；z索引:2；} 

js

  this.columnDefs = [{字段:运动员"，cellClass:'拖动行'，rowDrag:true}，//...]; 

正在工作的监听器 https://next.plnkr.co/edit/naFYtZTBZUJJOCfB

I am using the Vue version of 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/) on one of our tables. Everything seems to work out fine, but now I want to make the whole row a "grip" for dragging. I tried with pointer-events: none on .ag-row and making the native ag grip item bigger and clickable, but this doesn't seem to work:

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

Did anyone have any success on this?

解决方案

There may be other methods with javascript but you can do it with css like below

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

working plunker https://next.plnkr.co/edit/naFYtZTBZUJJOCfB

这篇关于ag-grid:使整行成为拖动行的手柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！