ngx- bootstrap tabset dragabble tabs - PullRequest
Новая
       3

ngx- bootstrap tabset dragabble tabs

0 голосов
/ 11 февраля 2020

Я столкнулся с проблемой, я знаю, что это запрос функции с 2018 года, но грустно, что не было сделано никаких шагов для реализации этой функции. Поэтому я хочу реализовать вкладку dragabble внутри вкладки. Я не могу сделать это с помощью dragula, так как вкладка преобразуется в

<ul> <li>tabs come here ar list items</li> <ul> <div>Tab content goes here</div>

. В этом случае мне нужно привязать dragula к самому ul, но у меня нет доступа к шаблон за вкладкой. Есть идеи, как мне получить к нему доступ? Я не хочу пробовать другие подходы, так как содержимое моей вкладки прекрасно работает, как работает tabset, и если я изменю его, оно тормозит.

Stackblitz для проблемы

1 Ответ

0 голосов
/ 11 февраля 2020

Пожалуйста, посмотрите на это решение, используя ngx-boostrap

stackblitz GithubRepo 

<tabset vertical="true" dndDropzone (dndDrop)="onDrop($event)" #someTabs>
    <tab *ngFor="let tab of tabsList;let index=index;">

        <ng-template tabHeading>
            <div id="tabIndex_{{index}}" (dndStart)="onDragStart($event)" [dndDraggable]="draggable.data"
                [dndEffectAllowed]="draggable.effectAllowed" [dndDisableIf]="index == 0"
                (dndCanceled)="onDraggableCancel($event);" (dndMoved)="onDraggableMoved($event,index)"
                (dndEnd)="onDragEnd($event)">

                <i class="fa fa-star"></i>{{tab.title}}
            </div>
        </ng-template>

        {{tab.content}}

    </tab>

</tabset>

в component.ts 

export class AppComponent {
  name = "Angular 5";

  currentTabId: any;
  previousTabId: any;
  tabsList = [
    { title: "Dynamic Title 1", content: "Dynamic content 1", active: true },
    { title: "Dynamic Title 2", content: "Dynamic content 2" },
    { title: "Dynamic Title 3", content: "Dynamic content 3" },
    { title: "Dynamic Title 4", content: "Dynamic content 4" },
    { title: "Dynamic Title 5", content: "Dynamic content 5" }
  ];

  @ViewChild("someTabs") someTabs: TabsetComponent;

  draggable = {
    // note that data is handled with JSON.stringify/JSON.parse
    // only set simple data or POJO's as methods will be lost
    data: "myDragData",
    effectAllowed: "all",
    disable: false,
    handle: false
  };

  onDragEnd(event: DragEvent) {
    try {
      let toIndex = this.currentTabId;
      let fromIndex = this.previousTabId;
      let tabListItems = this.tabsList;
      if (toIndex === undefined || fromIndex === undefined) { // executes when user doenst to a proper drag and drop
        alert("Please drag and drop / move tabs properly");
      } else {
        if (Number(toIndex) && Number(fromIndex)) { // restricts index == 0 tab from moving
          tabListItems.splice(toIndex, 0, tabListItems.splice(fromIndex, 1)[0]);
          this.someTabs.tabs.splice(
            toIndex,
            0,
            this.someTabs.tabs.splice(fromIndex, 1)[0]
          );
          console.log(tabListItems);
        } else { // executes when from or to tab is fist tab (index == 0)
          alert("Primary tab cannot be moved or replaced with other");
        }
      }
    } catch (e) { // executes when user doenst to a proper drag and drop (any exception)
      alert("Please drag and drop / move tabs properly");
    }
  }

  onDraggableCancel(event: DragEvent) { // on drag cancel or if user doing invalid drag and drop zone we are cancelling that drag and drop task
    this.previousTabId = null; 
    this.currentTabId = null;
  }

   onDraggableMoved(event: DragEvent) {

  }

  onDragStart(event: DragEvent){
      this.previousTabId = event.target["id"].split("_")[1];

  }

  onDrop(event) {
    this.currentTabId = event.event.target["id"].split("_")[1];
    console.log("dragover");
  }

}
...