ng-dragula去除拖動項目，角度4路由器

我們有一個應用程序，它是用角度4構建的，現在我們試圖通過使用dragula來定製我們的主題。我實現了頁面的每個部分，它正在工作，堅持等等。但現在我遇到了一個大問題。我們使用角度routerlink在我們的頁面之間切換。每件事情都可以正常工作，但是當我切換到另一個頁面（它與角色routerlink一起工作）後，我回到主頁面，它會導致dragula無法正常工作。我打印結果，但似乎每個節點的位置是堅持，它是真正的工作，但拖動每個組件後，它會消失。聽到的是一些代碼，可能有幫助：ng-dragula去除拖動項目，角度4路由器

<span *ngFor="let portion of filterUndefinedItems(getPortions1())"> 
    <rh-market-watch 
     *ngIf="portion.name == 'market-watch'" 
     style="display: flex;"></rh-market-watch>

...

this._dragulaService.setOptions('bag-one', { 
    revertOnSpill: true, 
    copy: true, 
    moves: function (el: any, container: any, handle: any): any { 
     if(el == null || el.children[0] == null) return false; 
     me.selectedElementName = el.children[0].getAttribute('name'); 
     me.selectedElementsParentId = container.id; 

     return typeof(handle.className) == 'string' && handle.className.indexOf('draggable-main') >= 0; 
    } 
}); 
this._dragulaService.drop.subscribe((value) => { 
    if (value[2].id != this.selectedElementsParentId) { 
     if (value[2].id.indexOf('2') > 0) 
      this.updateComponentColumn(this.selectedElementName, 2); 
     else if (value[2].id.indexOf('3') > 0) 
      this.updateComponentColumn(this.selectedElementName, 3); 
     else 
      this.updateComponentColumn(this.selectedElementName, 1); 
    } 
    if (value[4] != null && value[4].firstElementChild != null) 
     this.updateComponentPosition(
      value[1].firstElementChild.getAttribute('name'), // Name of element which we want to move, for example x 
      value[4].firstElementChild.getAttribute('name')  // Name of element which x will place on top of it 
     ); 
    let userDataList: UserData[] = []; 
    let userData: UserData = new UserData; 
    userData.dataKey = UserData.EXIR_CUSTOM_THEME_POSITIONS; 
    userData.dataValue = JSON.stringify([this.getPortions1(), this.getPortions2(), this.getPortions3()]); 
    userDataList.push(userData); 

    this._restService.setUserData(userDataList, this._http) 
     .then(error => { 
      this.error(error); 
     }); 
}); 
private findPortion(portionName): any[] { 
    for(let portion of this.getPortions1()) 
     if(portion.name == portionName) 
      return [1, portion]; 
    for(let portion of this.getPortions2()) 
     if(portion.name == portionName) 
      return [2, portion]; 
    for(let portion of this.getPortions3()) 
     if(portion.name == portionName) 
      return [3, portion]; 
    return null; 
} 

private getRelatedPortions(portionNumber): Portion[] { 
    switch (portionNumber) { 
     case 1: return this.portions1; 
     case 2: return this.portions2; 
     case 3: return this.portions3; 
     default: return null; 
    } 
} 

private setRelatedPortions(portionNumber, portions) { 
    switch(portionNumber) { 
     case 1: 
      this.portions1 = portions; 
      return; 
     case 2: 
      this.portions2 = portions; 
      return; 
     case 3: 
      this.portions3 = portions; 
      return; 
     default: 
      return; 
    } 
} 

private updateComponentPosition(portionName: string, newPosition: string) { 
    let portionInfo: any[] = this.findPortion(portionName); 
    let portionNumber: number = portionInfo[0]; 
    let portionToDrag: Portion = portionInfo[1]; 

    this.setRelatedPortions(portionNumber, this.getRelatedPortions(portionNumber).filter(obj => obj !== portionToDrag)); 
    this.getRelatedPortions(portionNumber).splice(this.getRelatedPortions(portionNumber).indexOf(this.findPortion(newPosition)[1]), 0, portionToDrag); 
} 

private updateComponentColumn(portionName: string, column: number) { 
    let portionInfo: any[] = this.findPortion(portionName); 
    this.getRelatedPortions(portionInfo[0]).splice(this.getRelatedPortions(portionInfo[0]).indexOf(portionInfo[1]), 1); 
    this.getRelatedPortions(column).push(portionInfo[1]); 
}

的方式我顯示組件：我有具有[dragula] 3個div元素= '袋酮' 和還有3個列表，表明哪個項目應該出現在哪個div中。在每個div中，我將每個可拖拽元素放置在一個跨度中的for循環中。因此，如果每個元素都在對應的列表中，它們將被打印。它工作得很好，但在切換到routerlink並再次回到主頁面後，ng-dracula停止工作，它不移動物品。它似乎與routerlink有關，但我不知道爲什麼。

我也面臨一些CSS問題，例如我的成分有CSS樣式：顯示：格但routerlink後，我有這種風格，但它不工作，當我禁用它，並重新啓用它，它只是精細。

任何幫助將不勝感激。

來源

2017-08-14 Naeem Baghi

不幸的是我發現這個問題，這只是一個小錯誤。第一個問題，我提出的樣式進行顯示：撓曲成使用組件：主機裝置：

@Component({ 
    selector: 'market-watch', 
    template: 'blah-blah', 
    style: ` 
     :host { display: grid } 
    ` 
})

和用於dragula問題，我使用的一些過濾器之前對一些錯誤，我的意思是該過濾器：

filterUndefinedItems(items) { 
    return items.filter(obj => obj !== undefined && obj != null); 
}

當我刪除它，問題解決了，我不知道爲什麼！但它現在正在工作！：D

來源

2017-08-14 11:09:15

ng-dragula去除拖動項目，角度4路由器

回答

相關問題