How to snap tasks to positions as you drag and resize them (React component)

[Simon Kristensen]

Hello,

Let me start by saying, that I really like your software so far! It's quite impressive both how extensive the features are and the documentation behind them.

However, there is one thing I haven't been able to find in the docs: how can I snap​ the tasks in the Gantt timeline to whole days as I drag/resize them? I've found it to be quite hard to determine whether a position you have dragged a task to will end up "slipping" to the left or right after letting go of the task. I also found it seems they slip all the way back to their original position when you let go (may when you drop them on a weekend?).

Could you point me to the right props for the react component props or give some hints as to how I could achieve this behavior?

If it's not possible, an OK alternative would be to just display a silhouette task where it would end up if you let go at any given position (or have the task you are dragging turn red, when hovering it over a weekend).

Just so it's easier for the user to understand what will happen (I would actually recommend that what I describe with snapping is the default behavior).

[Udhayakumar Anand]

Hi Simon,

Thank you for reaching out to us with your inquiry. We appreciate your kind words about our software and documentation.

Regarding your query, we understand your concern about snapping the tasks in the Gantt timeline to whole days while dragging or resizing them. Unfortunately, we cannot provide a work around or consider this as a feature request at this time. The reason being that if the taskbar is resized based on the weekend, there might be a possibility where the connection between mouse pointer and taskbar will be lost. Hence, we apologize for any inconvenience this may cause.

Please feel free to reach out to us if you have any further questions or concerns.

Regards,

Udhayakumar

[Simon Kristensen]

How about this alternative option then:

Would it be possible to not change anything with how it works right now (so the taskbar is still rendered as usual), but​ we also render a gray/transparent taskbar under the one being dragged, which indicates the "position" it would get if you let go of the mouse at it's current placement?

If not, could you give me any​ pointers at all, as to where I might look, in order to make a workaround for my own use case. For instance, hooking into the actionBegin​ event and positioning an indicator in the timeline through a useEffect and getElementById directly or something like that.

[Simon Kristensen]

I found an OK example of this: https://www.youtube.com/watch?v=2b-ftdMVovU
Watch the video from 0:07 to 0:09, where you can see both a smooth moving element (the item being dragged) and an indicator, snapping from position to position.

I know it's vertical dragging here, but in essence it should convey what I mean.

[Udhayakumar Anand]

Simon,

We have thoroughly reviewed your query, and unfortunately, we are unable to provide a workaround for your current requirement as we are unable to detect the position of the mouse and we do not have any event for it.

However, We are currently working on a similar feature where we render a virtual element, allowing you to drag the virtual element while the taskbar remains in the same place but even in this we can’t display the exact position where the taskbar will render after weekend calculations, This feature is scheduled to be rolled out on upcoming volume 2 release which is scheduled to be rolled out on June 20 2023, You can track it’s status from the feedback link given below

Feedback Link : https://www.syncfusion.com/feedback/43435/gantt-chart-need-to-provide-virtual-element-on-taskbar-resize-and-dragging

Please feel free to contact us if you have any questions

Regards,

Udhayakumar