What is the best way to limit dragging an event on a timeline?
We’d like to allow users to drag an event to different rows (resources) on the timeline, but we don’t want them to be able to drag the events to a different time. I understand I can use onBeforeEventChanged or something similar, but ideally the visual effect would reflect the limit so it’s very clear that the user can’t change the time of the event as they’re dragging.
Thank you.
Hello,
in order for the users to know which tasks are unchanged, you can change the color of the tasks itself and mark over areas inaccessible to moving the task.
To prevent users from changing the time when dragging the task, you should use onBeforeDrag and onDragEnd events. When onBeforeDrag fires, you can save the original time of the start and end of the task.
API onBeforeDrag :
https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforedrag_event.html
As users cannot edit the time period of the task, therefore, the before and after areas are not available. To mark blocked areas you need to use the addMarkedTimespan method:
https://docs.dhtmlx.com/scheduler/api__scheduler_addmarkedtimespan.html
So that the start and end time does not change when onDragEnd fires and assign the task a previously saved start and end date:
API onDragEnd :
https://docs.dhtmlx.com/scheduler/api__scheduler_ondragend_event.html
At the end of the drag, you need to remove the custom styling with deleteMarkedTimespan method:
https://docs.dhtmlx.com/scheduler/api__scheduler_deletemarkedtimespan.html
Here is a demo:
http://snippet.dhtmlx.com/5/1e7bbd9df