Vertical dNd partly working,

Gantt
#1

I follow this official snippet for vertical dNd which is working well.
My problem is that this snippet is working as it should only if there is no scrolling involved.

If you add more tasks that need to be scrolled in order to see them the overlay of the dragged task not on the clientY anymore.

I added more tasks to this example just for you to see the behavior.

Here is the same example just with more tasks.

Try to dNd the top task and after scroll to the bottom task and try to dNd this task and you can see that the overlay not where it should be.

How can I “Lock” the overlay on the clientY (mouse)?

Thanks,
Adir.

#2

Hello Adir,

I follow this official snippet for vertical dNd which is working well.

Thank you for the positive feedback. But it is not an official sample. It is only an example of the implementation with the Gantt API and Javascript. There is no guarantee that it will work in all possible use cases.

Gantt doesn’t have a built-in feature to vertically reorder tasks in the timeline. The dev team will add that feature in the future, but I cannot give you any ETA.
For now, you need to implement that functionality by using Gantt API and Javascript.

It is possible to let the HTML element to follow the mouse if you scroll down by adding the Gantt scroll position:

var y_pos;
gantt.attachEvent("onMouseMove", function (id,e){
  y_pos = e.clientY + gantt.getScrollState().y;
});

Also, when the task is outside the viewport, it is not displayed nor rendered, so the HTML element will stop moving when you scroll down.
To work around it, you need to always display the additional task layer element.

You can see how it works in the updated snippet:
http://snippet.dhtmlx.com/5/4f6456d8e

#3

Thank you Ramil!
That was helpful :slight_smile: