Ng-zorro-antd: Tabs component doesn't have a drag and drop feature to order

[daevyck]

What problem does this feature solve?

For Tabs component, would like to have a way to can order the tabs using drag and drop method

What does the proposed API look like?

May be providing a draggin and dropping methods or providing and option to active or deactive this feature

[wenqi73]

https://next.ant.design/components/tabs-cn/

[abhilashlr]

You could try something that works for me:

<nz-tabset cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
  <nz-tab *ngFor="let tab of tabs" [nzTitle]="titleTemplate">
    <ng-template #titleTemplate>
      <div cdkDrag>
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{ tab.name }}
      </div>
    </ng-template>
  </nz-tab>
</nz-tabset>

Of course you will have to import { DragDropModule } from '@angular/cdk/drag-drop';

And in TS:

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);
}

[arjancupi]

@abhilashlr i just tried you approach but can't manage to have draggable tabs, here is the stackblitz : https://stackblitz.com/edit/angular-u1rlnn
edit i had to delete the duplicate nzTitle attribute n nz-tab, it works now

[TekVanDo]

This solution does n`t work for [nzType]="'card'" https://stackblitz.com/edit/angular-u1rlnn-gtpxgg 😥

[abhilashlr]

@abhilashlr i just tried you approach but can't manage to have draggable tabs, here is the stackblitz : https://stackblitz.com/edit/angular-u1rlnn
edit i had to delete the duplicate nzTitle attribute n nz-tab, it works now

I've updated the comment. Thanks for bringing that up.

[abhilashlr]

This solution does n`t work for [nzType]="'card'" https://stackblitz.com/edit/angular-u1rlnn-gtpxgg 😥

I tried your url and it seems to work for me. I'm on firefox though.

[whittssg]

@abhilashlr It sort of works but if you drag tab 3 (for example) over tab two the word two end up underneath tab 3 (with a bit showing).
It does other strange stuff as well.

[abhilashlr]

@abhilashlr It sort of works but if you drag tab 3 (for example) over tab two the word two end up underneath tab 3 (with a bit showing).

It does other strange stuff as well.

I think that's a bit of CSS that needs to be done. I haven't shared that since that's something that depends on how you would want the dragging placeholders to appear. A bit of z-index, positions,etc should solve it I guess.

[daevyck]

Thanks for the help

[wendellhu95]

Considering that the React version supports dnd, we should make it available. PR is welcome!

[zorro-bot[bot]]

Hello @daevyck. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @daevyck, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[vthinkxie]

Hi
tabs need to be refactored since the latest antd totally rewrite the tabs UE/UX

blocked by https://github.com/NG-ZORRO/ng-zorro-antd/issues/5557

anyone wishes to support this feature should wait until #5557 resolved

[TekVanDo]

Hi is any progress with it? I think blocker is solved now...