Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
45
Reorganize Tabs with Drag and Drop
posted

I have a few tab-items with header and content. I need them to be able to be reorganized into a different order by the user.

However if i apply igxDrop/igxDrag to the <igx-tab-item> element, the directive is not applied in the final DOM and its not possible to drag anything. On igx-tab-header the directive is applied, however then i need to somehow also take the content and need to know the id of the associated item. In my opinion it might maybe work, but it needs quite some effort from my perspective.

Thus is there any best way recommended to organize tabs into a different order by the user? (for example with Drag and Drop).

Kind regards

Thomas

  • 2700
    Verified Answer
    Offline posted

    Hi Thomas,

    Thank you for posting to Infragistics Community!

    You are on the right track to implementing reordering of the IgxTabs items by leveraging the IgxDrag/IgxDrop directives. 

    To demonstrate how this can be achieved I created this StackBlitz sample demonstrating a really straightforward approach. As you can see, both the drag and drop directives are applied on the IgxTabHeader element. This sample follows the examples from the Drag and Drop Directives Overview topic in our documentation.

    Please, check it out and let me know if it accurately demonstrates what you are trying to achieve.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer