diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js
index 7c55c27b03..e8cf16e2ed 100644
--- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js
+++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js
@@ -13,15 +13,16 @@ type Props = {
     handleToggle: (id: string) => () => any,
 };
 
-export class DragDropList extends Component<Props> {
-    moveListItem: (dragIndex: number, hoverIndex: number) => void;
+type State = {
+    isDraggingAny: boolean,
+};
 
-    constructor(props: Props) {
-        super(props);
-        this.moveListItem = this.moveListItem.bind(this);
-    }
+export class DragDropList extends Component<Props, State> {
+    state = {
+        isDraggingAny: false,
+    };
 
-    moveListItem(dragIndex: number, hoverIndex: number) {
+    moveListItem = (dragIndex: number, hoverIndex: number) => {
         const { listItems } = this.props;
         const dragListItem = listItems[dragIndex];
         let sortedList = [];
@@ -33,10 +34,19 @@ export class DragDropList extends Component<Props> {
         });
 
         this.props.handleUpdateListOrder(sortedList);
-    }
+    };
+
+    handleDragStart = () => {
+        this.setState({ isDraggingAny: true });
+    };
+
+    handleDragEnd = () => {
+        this.setState({ isDraggingAny: false });
+    };
 
     render() {
         const { listItems } = this.props;
+        const { isDraggingAny } = this.state;
 
         return (
             <DndProvider backend={HTML5Backend}>
@@ -58,6 +68,9 @@ export class DragDropList extends Component<Props> {
                                 moveListItem={this.moveListItem}
                                 handleToggle={this.props.handleToggle}
                                 visible={item.visible}
+                                isDraggingAny={isDraggingAny}
+                                onDragStart={this.handleDragStart}
+                                onDragEnd={this.handleDragEnd}
                             />
                         ))}
                     </TableBody>
diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js
index 3d258163a4..2f9087aa2f 100644
--- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js
+++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js
@@ -2,11 +2,20 @@
 import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core/styles';
 
 const ItemTypes = {
     LISTITEM: 'listItem',
 };
 
+const styles = {
+    rowWithoutHover: {
+        '&:hover > td': {
+            backgroundColor: 'transparent !important',
+        },
+    },
+};
+
 type Props = {
     id: string,
     visible: boolean,
@@ -14,9 +23,24 @@ type Props = {
     index: number,
     handleToggle: (id: string) => any,
     moveListItem: (dragIndex: number, hoverIndex: number) => void,
+    isDraggingAny: boolean,
+    onDragStart: () => void,
+    onDragEnd: () => void,
+    classes: any,
 };
 
-export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: Props) => {
+const DragDropListItemPlain = ({
+    id,
+    index,
+    text,
+    visible,
+    handleToggle,
+    moveListItem,
+    isDraggingAny,
+    onDragStart,
+    onDragEnd,
+    classes,
+}: Props) => {
     const ref = useRef(null);
 
     const [, drop] = useDrop({
@@ -54,7 +78,14 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL
     const opacity = isDragging ? 0 : 1;
 
     return (
-        <DataTableRow ref={ref} style={{ opacity }} draggable>
+        <DataTableRow
+            ref={ref}
+            style={{ opacity }}
+            className={isDraggingAny ? classes.rowWithoutHover : null}
+            draggable
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+        >
             <DataTableCell>{text}</DataTableCell>
             <DataTableCell>
                 <Checkbox
@@ -67,3 +98,5 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL
         </DataTableRow>
     );
 };
+
+export const DragDropListItem = withStyles(styles)(DragDropListItemPlain);