I am aware of lots of other posts on this topic, but none seem to be exactly what I am looking for, and I am unable to find the answer by my self.
I am using react DND version 16.0.1
I want to drop elements into a vertical timeline. I am able to calculate the time the element was "dropped" to using the pixel coordinates of the dropped element.
However, I always get the coordinates of the mouse curser on drop instead of the x and y coordinates of the droped item at time of drop. Here is what I am trying to get those coordinates:
function calc_local_offset(monitor) {
let offset= monitor.getClientOffset()
const deltaX = offset.x - boundingBox.current.left
const deltaY = offset.y - boundingBox.current.top
return { x: deltaX, y: deltaY }
}
and here is my useDrop:
const [{ isOver, canDrop }, drop_ref] = useDrop({
...
drop: (item, monitor) => onDrop({...item}, calc_local_offset(monitor)),
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
...
})
I used the last post in https://github.com/react-dnd/react-dnd/issues/151 as a guide.
The problem is, that users will expect to have the "time" of the object to be the position of the top of the dropped element not the position of the cursor, As Elements can have different height, depending on their "duration".
[EDIT] I missed some of the important code in my original question so here goes:
const boundingBox = useRef(null)
function combinedRef(el) {
drop_ref(el);
if (el) {
boundingBox.current = el.getBoundingClientRect();
}
}
return (
<div className="work_day_workspace">
<span className="workspace_header">{workspace.identifier}</span>
<div ref={combinedRef} >
{workspace.executions.map((execution) => {
return (
<Execution execution={execution} />
)
})
}
</div>
</div>
)
With Execution being the dragable element:
export const Execution = memo(function Execution({ execution }) {
const [{ opacity }, drag] = useDrag(
() => ({
type: "execution",
item: { execution },
collect: (monitor) => ({
opacity: monitor.isDragging() ? 0.4 : 1,
item: monitor.getItem(),
}),
}),
[execution],
)
return (
<div>
.... display stuff
</div>
)
})
from React DND how to get the coordinates of the droped element
No comments:
Post a Comment