I am currently utilizing the Reacts Antd library to showcase the contents of my table. I am interested in implementing a feature that allows me to resize the column widths. To achieve this, I have wrapped the column in my element as depicted below. The dragging functionality is working seamlessly as expected; however, an issue arises where the handleMouseUp method is only triggered upon clicking again, rather than when releasing the mouse button. In attempting to resolve this, I referred to the link provided at https://www.w3schools.com/HOWTO/howto_js_draggable.asp. Despite following the instructions, the problem persists, and I am unable to identify its cause.
Please assist me in identifying any potential issues within the code snippet provided below.
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);