Add Drag Functionality to Tour Steps to Improve Positioning Flexibility

[yosraletaief]

I'm using Angular 13 with ngx-ui-tour version 8 in my real project, and I have created this minimal project for the guided tour using Angular 18 :
👉 https://stackblitz.com/edit/angular-wau2z8-ljifvpsk

I am trying to place the tour step next to the anchor element using the following placement configuration:

placement: {
  horizontal: true,
  xPosition: 'before',
  yPosition: 'above',
}

However, when there isn't enough space, the placement is not applied as expected — as mentioned in your answer here:
#107 (comment)

Also, in some cases when the tourStep content is too long, it ends up being placed directly on top of the anchor element.

I was wondering if there is a way to enable a drag functionality for the tour step?
I'd like to keep track of the element using the black box I added in the demo.

[hakimio]

Tour step dragging is not supported and there are no plans to support it, but since v11 there is a new config placement.horizontal which gives you more flexibility when positioning the tour step.

[yosraletaief]

I'm currently using V8. Is there a way to implement the horizontal alignment?

[hakimio]

No.