How to make <div> element draggable/resizeable in react to achieve resizeable column in antd table?

General
1

I’m using reacts antd library to display my table contents. I want to add a feature to resize my column widths. Hence I’m wrapping the column in my as shown below. Dragging is working fine as expected but the problem is handleMouseUp method is triggered only when I click again but not called when I release the mouse . I followed the the link How To Create a Draggable HTML Element to achieve it but there seems to be some problem as I stated earlier which I couldn’t figure it out.

Please help me on what could be the issue with the below code

import React from 'react';
import { memo } from 'react';

const ResizeableHeaderComponent = (props: any) => {
  const onResize = (event: MouseEvent) => {
    if (event.movementX != 0) {
      event.preventDefault();
      props.onResize(event, props.index);
    }
  };

  const handleMouseUp = () => {
    window.removeEventListener('mousemove', onResize);
  };

  const handleMouseDown = () => {
    window.addEventListener('mousemove', onResize);
    window.addEventListener('mouseup', handleMouseUp);
  };
  return (
    <>
      {props.title}
      <div
        draggable={true}
        style={{
          position: 'absolute',
          bottom: 0,
          right: '-5px',
          width: '10px',
          height: '100%',
          zIndex: 5,
          cursor: 'col-resize'
        }}
        onMouseDown={handleMouseDown}
      />
    </>
  );
};

export default memo(ResizeableHeaderComponent);
2

The issue with your code is that you’re using window.addEventListener to attach the onResize and handleMouseUp event listeners. This means that the event listeners are attached to the entire window object, not just the draggable element. As a result, when you release the mouse button anywhere on the screen, the handleMouseUp event is triggered, regardless of whether the mouse is over the draggable element.

To fix this, you should attach the event listeners to the draggable element itself, using the addEventListener method provided by React. Here’s the corrected code:

JavaScript
import React, { useRef } from 'react';
import { memo } from 'react';

const ResizeableHeaderComponent = (props: any) => {
  const draggableRef = useRef(null);

  const onResize = (event: MouseEvent) => {
    if (event.movementX != 0) {
      event.preventDefault();
      props.onResize(event, props.index);
    }
  };

  const handleMouseUp = () => {
    window.removeEventListener('mousemove', onResize);
  };

  const handleMouseDown = () => {
    draggableRef.current.addEventListener('mousemove', onResize);
    draggableRef.current.addEventListener('mouseup', handleMouseUp);
  };

  return (
    <>
      {props.title}
      <div
        ref={draggableRef}
        draggable={true}
        style={{
          position: 'absolute',
          bottom: 0,
          right: '-5px',
          width: '10px',
          height: '100%',
          zIndex: 5,
          cursor: 'col-resize'
        }}
        onMouseDown={handleMouseDown}
      />
    </>
  );
};

export default memo(ResizeableHeaderComponent);