title: Ionic 3 - Dragula - CSS style being lost - mirrorContainer
body: <p>I am a new developer and new to Ionic. </p>
  
  <p>Trying to integrate the Dragula module and I have it working in terms of being able to re-order my elements but the CSS is being lost between drag and drop. (comes back again once you drop it).</p>
  
  <p>I have read the docs and other people's questions and have narrowed it down to "drake" possibly and setting the mirrorContainer (as document.body is not working)? As the items I want to reorder are not part of the DOM on build (the get shown on expanding the list item).</p>
  
  <p>As I said I'm new to all this and am having trouble figuring out where and how to write the actual code for this. Any help with written examples would be amazing.</p>
  
  <p>My code below.</p>
  
  <p>app.html</p>
  
  <pre><code>&lt;ion-header class="toolbar-header"&gt;
    &lt;web-nav class="web-only"&gt;&lt;/web-nav&gt; 
    &lt;mobile-nav class="mobile-only"&gt;&lt;/mobile-nav&gt;
  &lt;/ion-header&gt;  
  &lt;ion-split-pane&gt;
    &lt;ion-menu type="overlay" [content]="content" class="menu-width"&gt;
      &lt;ion-header no-border class="header-style"&gt;
        &lt;ion-toolbar color="light"&gt;
        &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
      &lt;ion-content class="side-menu-bg-color"&gt;
        &lt;ion-list no-lines&gt;
          &lt;!--loops through titles to be displayed in side menu--&gt;
          &lt;div *ngFor="let p of pages; let i=index" (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}"&gt;
            &lt;button ion-item (click)="openPage(p)" class="side-menu-bg-color"&gt;
              &lt;ion-icon [name]="p.icon" item-left&gt;&lt;/ion-icon&gt;
              &lt;span class="side-menu-title"&gt;{{p.title}}&lt;/span&gt; &lt;span item-right class="side-menu-messages"&gt;{{p.messages}}&lt;/span&gt;
              &lt;ion-icon *ngIf="p.expandable != nil" item-right [name]="isGroupShown(i) ? 'ios-arrow-up' : 'ios-arrow-down'" class="expand-icon"&gt;&lt;/ion-icon&gt;
            &lt;/button&gt;
            &lt;!--dragula applied for drag and drop within expandable side menu options--&gt;
            &lt;div  id="menu-dragula-mirror"&gt;
            &lt;div [dragula]='"movableProject"' *ngIf="isGroupShown(i)"&gt;
              &lt;div *ngFor="let sub of p.expandable"&gt;
                &lt;button ion-item (click)="goProjects()" menuClose [ngClass]="{'companyColor-one' : sub.company == 'NETS', 'companyColor-two' : sub.company == 'airBux', 'companyColor-three' : sub.company == 'Muulla'}"
                  class="expandable-side-menu expandable-side-menu-bg"&gt;{{sub.company}} &lt;span item-right class="side-menu-messages"&gt;{{sub.messages}}&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ion-list&gt;
      &lt;/ion-content&gt;
    &lt;/ion-menu&gt;
  
    &lt;!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --&gt;
    &lt;ion-nav [root]="rootPage" main #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
  &lt;/ion-split-pane&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { Nav, Platform } from 'ionic-angular';
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  
  import { HomePage } from '../pages/home/home';
  import { ListPage } from '../pages/list/list';
  import { WebListPage } from '../pages/web-list/web-list';
  import { MobileListPage } from '../pages/mobileList/mobileList';
  import { WeekOutlookPage } from '../pages/week-outlook/week-outlook';
  import { OverduePage } from '../pages/overdue/overdue';
  import { WatchingPage } from '../pages/watching/watching';
  import { FavouritesPage } from '../pages/favourites/favourites';
  import { ActivitiesPage } from '../pages/activities/activities';
  import { ProjectsPage } from '../pages/projects/projects';
  import { AssigneesPage } from '../pages/assignees/assignees';
  import { FilterPage } from '../pages/filter/filter';
  import { LabelPage } from '../pages/label/label';
  import { DragulaService } from '../../node_modules/ng2-dragula/ng2-dragula';
  import { WebCalPage } from '../pages/web-cal/web-cal';
  import { CalCompComponent } from '../components/cal-comp/cal-comp';
  import { LeftMenuComponent } from '../components/left-menu/left-menu';
  import { CommentsComponent } from '../components/comments/comments';
  
  @Component({
    selector: 'page-menu',
    templateUrl: 'app.html',
    providers: [DragulaService]
  })
  export class MyApp {
    @ViewChild(Nav) nav: Nav;
  
    rootPage: any = WebListPage;
  
    pages: any;
    shownGroup = null;
  
    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private dragulaService: DragulaService) {
      this.initializeApp();
  
      // used for an example of ngFor and navigation
      this.pages = [
        { title: 'Inbox', component: WebListPage, icon: 'ios-filing-outline', messages: 8 },
        { title: 'Today', component: WebCalPage, icon: 'ios-sunny-outline', messages: 15 },
        { title: 'Next 7 Days', component: WeekOutlookPage, icon: 'ios-calendar-outline', messages: 45 },
        { title: 'Overdue', component: OverduePage, icon: 'ios-timer-outline', messages: 2 },
        { title: 'Watching', component: WatchingPage, icon: 'ios-eye-outline' },
        { title: 'Favourites', component: FavouritesPage, icon: 'star-outline' },
        { title: 'My Activities', component: ActivitiesPage, icon: 'heart-outline' },
        { title: 'Projects', component: ProjectsPage, icon: 'ios-folder-open-outline', expandable: [{ company: "airBux", messages: 2 }, { company: "NETS", messages: 5 }, { company: "Muulla", messages: 16 }] },
        { title: 'Assignees', component: AssigneesPage, icon: 'ios-contact', expandable: [] },
        { title: 'Filters', component: FilterPage, icon: 'ios-funnel', expandable: [] },
        { title: 'Labels', component: LabelPage, icon: 'ios-pricetag-outline', expandable: [] },
      ];
  
      // code for dragula drag and drop 
      this.dragulaService.setOptions('movableProject', {
        revertOnSpill: true,
      });
  
    }
  
  
    initializeApp() {
      this.platform.ready().then(() =&gt; {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      });
    }
  
    openPage(page) {
      // Reset the content nav to have just this page
      // we wouldn't want the back button to show in this scenario
      this.nav.setRoot(page.component);
    }
  
  
    // code for having expandable arrows point up and down on toggle when expanding menu title
    toggleGroup(group) {
      if (this.isGroupShown(group)) {
        this.shownGroup = null;
      } else {
        this.shownGroup = group;
      }
    }
    isGroupShown(group) {
      return this.shownGroup === group;
    }
  
    goProjects() {
      this.nav.push(ProjectsPage);
    }
  
  }
  </code></pre>