Using a handle with React DND - react-hooks

Question

I am using React-dnd, and trying to create a table with sortable rows, which can only be dragged from a handle, which is a small span on the right hand side.
The example they give here
https://react-dnd.github.io/react-dnd/examples/customize/handles-and-previews
does not show any sorting. I can get the Handle to work, with a different preview, the problem is if I use the code they provide, the dropzone for sorting the table only works when I hover it directly over the span, not over the row like it should.
my code:
const dragRef = useRef<any>(null)
const [{ isDragging }, drag, preview] = useDrag({
type: DragTypeEnum.ENTRY,
item: () => {
return { id: props.id, index: props.sequence }
},
collect: (monitor: any) => ({
isDragging: monitor.isDragging(),
}),
});
const [{ handlerId }, drop] = useDrop({
accept: DragTypeEnum.ENTRY,
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
hover(item: DragItem, monitor: DropTargetMonitor) {
if (!dragRef.current) {
return
}
const dragId = item.id
const hoverId = props.id;
// Don't replace items with themselves
if (dragId === hoverId) {
return
}
// Determine rectangle on screen
const hoverBoundingRect = dragRef.current?.getBoundingClientRect()
// Get vertical middle
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
// Determine mouse position
const clientOffset = monitor.getClientOffset()
// Get pixels to the top
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragId < hoverId && hoverClientY < hoverMiddleY) {
console.log("downwards");
return
}
// Dragging upwards
if (dragId > hoverId && hoverClientY > hoverMiddleY) {
console.log("upwards");
return
}
// Time to actually perform the action
props.moveEntry(dragId, hoverId) //ONLY FIRING WHEN I GO OVER THE HANDLE :(
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
item.id = hoverId
},
});
const opacity = isDragging ? 0 : 1;
drag(drop(dragRef))
And the table tsx is:
<tr
style={{ opacity }}
data-handler-id={handlerId}
ref={preview} //THIS SHOULD BE THE PREVIEW HTML AND ALSO WHERE I CAN DRAG INTO
>
<td>
//emptied for demo purpose
</td>
<td>
//emptied for demo purpose
</td>
<td>
<span ref={dragRef}> // THIS IS MY DRAG HANDLE
<FontAwesomeIcon
icon="bars"
className="pointer"
></FontAwesomeIcon>
</span>
</>
}
</td>
</tr>

Answer 1

Create 2 refs for handler and for preview
for example like this
const dragRef = useRef<HTMLDivElement>(null)
const previewRef = useRef<HTMLDivElement>(null)
Then you need wrap your refs with handlers
drag(dragRef)
drop(preview(previewRef))
With your code it will be look like:
const dragRef = useRef<HTMLDivElement>(null)
const previewRef = useRef<HTMLDivElement>(null)
const [{ isDragging }, drag, preview] = useDrag({
type: DragTypeEnum.ENTRY,
item: () => {
return { id: props.id, index: props.sequence }
},
collect: (monitor: any) => ({
isDragging: monitor.isDragging(),
}),
});
const [{ handlerId }, drop] = useDrop({
accept: DragTypeEnum.ENTRY,
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
hover(item: DragItem, monitor: DropTargetMonitor) {
if (!previewRef.current) {
return
}
const dragId = item.id
const hoverId = props.id;
// Don't replace items with themselves
if (dragId === hoverId) {
return
}
// Determine rectangle on screen
const hoverBoundingRect = previewRef.current?.getBoundingClientRect()
// Get vertical middle
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
// Determine mouse position
const clientOffset = monitor.getClientOffset()
// Get pixels to the top
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragId < hoverId && hoverClientY < hoverMiddleY) {
console.log("downwards");
return
}
// Dragging upwards
if (dragId > hoverId && hoverClientY > hoverMiddleY) {
console.log("upwards");
return
}
// Time to actually perform the action
props.moveEntry(dragId, hoverId) //ONLY FIRING WHEN I GO OVER THE HANDLE :(
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
item.id = hoverId
},
});
const opacity = isDragging ? 0 : 1;
drag(dragRef)
drop(preview(previewRef))
table
<tr
style={{ opacity }}
data-handler-id={handlerId}
ref={previewRef} //THIS SHOULD BE THE PREVIEW HTML AND ALSO WHERE I CAN DRAG INTO
>
<td>
//emptied for demo purpose
</td>
<td>
//emptied for demo purpose
</td>
<td>
<span ref={dragRef}> // THIS IS MY DRAG HANDLE
<FontAwesomeIcon
icon="bars"
className="pointer"
></FontAwesomeIcon>
</span>
</>
}
</td>
</tr>