ag-grid: Enable row dragging by allowing users to drag the entire row

Currently, I am utilizing the Vue version of ag-grid 21.2.1 (https://www.ag-grid.com/vue-getting-started/) and successfully integrated Row Dragging (https://www.ag-grid.com/javascript-grid-row-dragging/) feature on one of our tables. Everything is functioning well, but I am now aiming to enhance the user experience by making the entire row act as a "grip" for dragging purposes. I attempted to utilize pointer-events: none on .ag-row and enlarging the native ag grip item to be more clickable, but unfortunately, this approach did not yield the desired results: 

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

Has anyone successfully tackled this challenge before?

javascriptcssvue.jsag-grid

Answer №1

While there may be alternative approaches using javascript, achieving the same result with css is also possible as demonstrated below:

Utilizing CSS:

.drag-item {
    position: relative;
    overflow: visible !important;
}
.drag-item .cell-content {
    margin-left: 20px;
}
.drag-item .row-draggable {
    position: absolute;
    width: 1000px;
    z-index: 3;
}

Using JavaScript:

this.columnDefs = [
  {
    field: "player",
    cellClass: 'drag-item',
    enableRowDrag: true
  },
  // ...
];

For a working example, you can view the Plunker demo here.

Answer №2

Take a look at this functioning demonstration

To begin, ensure that you have set rowDrag in the defaultColDef as shown below:

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

Next, apply the following CSS to set the opacity of ag-icon-grip to 0 for all columns except the first one:

.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;
}

Within the Vue component, add cellClass to display the drag icon in the first column. Like this:

this.columnDefs = [
  {field: "athlete", cellClass: 'first-drag-column'},
  { field: "country" },
  { field: "year" },
  { field: "date" },
  { field: "sport" },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" }
];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the Animation for Datepicker Closure

While using the date picker, I want it to match the width of the input text box. When closing the date picker, I prefer a smooth and single motion. However, after selecting a from and to date, the datepicker no longer closes smoothly. I have attempted sol ...

javascripthtmljquerycss

Enhancing jQuery Component while making an Ajax request

When a user clicks a button, I am making an ajax call to send out multiple emails. My goal is to update a "Please wait..." div before and after the call with status updates, as well as report any errors that may occur. However, I have encountered an issue ...

javascriptjqueryhtml

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Struggling to find a way to apply the styles for the stepper component without using inline styles. I attempted to replicate Material UI's demo, but encountered an error. The code from Material UI's demo that I want to mimic is shown below: http ...

javascriptcssreactjsreact-nativematerial-ui

Incorporating a feature to leave comments in JSON data through AngularJS

Yesterday, I completed an AngularJS test that presented me with two tasks. One task involved displaying the data of a JSON file on a webpage in HTML form. I accessed the FreshlyPressed JSON via the link "" and effectively showcased the thumbnail, pos ...

javascriptjsonangularjs

Having difficulty transitioning a function with a promise from JavaScript to TypeScript

I am currently in the process of transitioning my existing NodeJS JavaScript code to TypeScript for a NodeJS base, which will then be converted back to JavaScript when running on NodeJS. This approach helps me maintain clear types and utilize additional fe ...

javascriptnode.jstypescript

Angular: The property '**' is not found on the type 'Object'

Not too long ago, I embarked on a new Angular project where my setup involves Angular (the front-end) communicating with a node.js server (the back-end), which in turn might make requests to an api server or a mongo database when necessary. The tricky par ...

javascriptnode.jsjsonangular

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

htmlcssxhtml

Trouble with Angular toggle switch in replicated form groups

Currently, I have a form group that contains multiple form controls, including a toggle switch. This switch is responsible for toggling a boolean value in the model between true and false. Depending on this value, an *ngIf statement determines whether cert ...

javascriptangulartypescript

Returned from a function are Vue 3 reactive values

I am facing an issue with Vue not tracking changes in variables generated by a function. These variables are supposed to be reactive and might change over time. <template> {{ parse('foo') }} </template> <scri ...

vue.jsvuejs3vue-composition-api

Utilizing one-way data binding with Angular 2 in HTML is similar to the approach used in Angular 1, employing the

Is there a method in Angular 2 to achieve one-way data binding similar to what we did in Angular 1? <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> &l ...

javascriptangularjsangular2-templatetwo-way-binding

Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacit ...

javascripthtmlcssgsap

Displaying content conditionally in Vue.js

I need assistance with displaying product lists for different companies in cards based on the selected section. Currently, the products are being displayed for all listed companies because the markup is the same across the page. Below is a snippet of my co ...

vue.jsvuejs2vue-component

Textures in ThreeJS that are of type transparent PNG and have

Having trouble understanding an issue I encountered with ThreeJS. There's a basic cube on a page and I've got a PNG image of a white question mark, with the rest of the image transparent. When I apply the texture to the cube; cubeGeometry = new ...

javascriptthree.js

Saving Style Sheets in a Database

Currently, I am interested in saving CSS data in a mySql database as part of my LAMP setup. My intention is to create an input field that includes the following code: body{ background: url("http://google.com/image.jpg") no-repeat; color: orange; } #someDi ...

phpmysqlcsssecurity

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...

javascriptangulartypescriptangular-materialangular-material2

The Bootstrap navigation bar is experiencing functionality issues when viewed on Chrome mobile browsers

I'm currently testing out the bootstrap 3 navbar feature on my meteor application, but I'm encountering some issues specifically on mobile devices. The problem seems to be that the toggle button is not showing up as expected. Interestingly, it wo ...

javascripthtmlcsstwitter-bootstrapmeteor

Make an axios request multiple times equal to the number of items in the previous response

In my project, I am using the axios library to convert addresses into their respective coordinates. First, I fetch a list of addresses from an API. Next, I take the RESPONSE object and use Google API to convert each address to coordinates. Finally, I wan ...

javascriptnode.jsexpressaxios

Using JQuery's change function with a Button Group is a great way

I encountered an issue where my button group works with the on.click function but not with on.change. <div class="ui buttons"> <button class="ui button">Value 1</button> <button class="ui bu ...

javascriptjquerybuttongroup

The error handler function is missing in Zepto's $.post method

When I was using Zepto instead of jQuery, I noticed that while the $.ajax method has an error handler, other methods like $.post and $.get do not. Do you know why this is the case? Function Signature $.post(url, [data], function(data, status, xhr){ ... }, ...

javascriptjqueryajaxxmlhttprequestzepto

Replace the value of Undefined with an empty string

I have been utilizing exif.js to extract metadata from the images I upload on a content management system (CMS). However, sometimes when an image does not contain any metadata, certain values may show up as "undefined". My goal is to replace these "undefin ...

javascriptexif-js