我是一名新开发人员，也是 Ionic 的新手。
尝试集成 Dragula 模块，我让它能够重新排序我的元素，但 CSS 在拖放之间丢失。（一旦你放下它又回来了）。
我已经阅读了文档和其他人的问题，并将其范围缩小为可能的“德雷克”并设置了 mirrorContainer（因为 document.body 不起作用）？由于我要重新排序的项目不是构建时 DOM 的一部分（扩展列表项时显示的 get）。
正如我所说，我对这一切都很陌生，并且无法弄清楚在哪里以及如何为此编写实际代码。任何有关书面示例的帮助都会很棒。
我的代码如下。
应用程序.html
<ion-header class="toolbar-header">
<web-nav class="web-only"></web-nav>
<mobile-nav class="mobile-only"></mobile-nav>
</ion-header>
<ion-split-pane>
<ion-menu type="overlay" [content]="content" class="menu-width">
<ion-header no-border class="header-style">
<ion-toolbar color="light">
</ion-toolbar>
</ion-header>
<ion-content class="side-menu-bg-color">
<ion-list no-lines>
<!--loops through titles to be displayed in side menu-->
<div *ngFor="let p of pages; let i=index" (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
<button ion-item (click)="openPage(p)" class="side-menu-bg-color">
<ion-icon [name]="p.icon" item-left></ion-icon>
<span class="side-menu-title">{{p.title}}</span> <span item-right class="side-menu-messages">{{p.messages}}</span>
<ion-icon *ngIf="p.expandable != nil" item-right [name]="isGroupShown(i) ? 'ios-arrow-up' : 'ios-arrow-down'" class="expand-icon"></ion-icon>
</button>
<!--dragula applied for drag and drop within expandable side menu options-->
<div id="menu-dragula-mirror">
<div [dragula]='"movableProject"' *ngIf="isGroupShown(i)">
<div *ngFor="let sub of p.expandable">
<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">{{sub.company}} <span item-right class="side-menu-messages">{{sub.messages}}</span>
</button>
</div>
</div>
</div>
</div>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
app.component.ts
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(() => {
// 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);
}
}