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 https://www.w3schools.com/HOWTO/howto_js_draggable.asp 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);