在以角度5拖放时对列表进行排序

时间:2018-01-09 08:15:54

标签: javascript angular forms drag-and-drop

我正在使用ng-drag-drop将列表从一个div拖放到另一个div。如果在div中发生拖放,我想重新排列列表。

以下是我的代码。有没有相同的图书馆?

我尝试了sortablejs但没有运气,我使用的是角度5

请建议

可以使用primeng允许将数据表上的一行拖到角度为5的任何组件中吗?

                                                                   添加控件                                                                                                                                 {{项目名称}}                                                                                                                   

数据透视表

                                                                                                                                       放下任何东西                                                                              {{项目名称}}                                                                                                                                                                                                    放下任何东西                                                      {{项目名称}}                                                                                                

 pivotItems =[
  {name: 'Month', type: 'Controls'},
  {name: 'Year', type: 'Controls'},
  {name: 'Summary', type: 'Controls'},
  {name: 'Calc', type: 'Controls'},
  {name: 'Month1', type: 'Controls'},
  {name: 'Year1', type: 'Controls'},
  {name: 'Summary1', type: 'Controls'},
  {name: 'Calc1', type: 'Controls'}
 ]

  droppedItems = [];
  droppedVerticalItems=[];
  droppedHorizontalItems=[];
  dragEnabled = true;


  onVerticalDrop(e: any) {
    this.droppedVerticalItems.push(e.dragData);
    this.removeDuplicateItem(e.dragData, 'vertical');
    this.removeItem(e.dragData, this.pivotItems);
  }

  onHorizontalDrop(e: any) {
    this.droppedHorizontalItems.push(e.dragData);
    this.removeDuplicateItem(e.dragData, 'horizontal');
    this.removeItem(e.dragData, this.pivotItems);
  }

  removeItem(item: any, list: Array<any>) {
    let index = list.map(function (e) {
      return e.name
    }).indexOf(item.name);
    if(index >-1){
      list.splice(index, 1);
    }
  }
  onDragStartFn(e:any){
    console.log(e);
  }

  removeDuplicateItem(item: any,dragArea) {
    let list;
    if(dragArea === 'horizontal'){
      list =  this.droppedVerticalItems;
    }
    else  if(dragArea === 'vertical'){
      list =  this.droppedHorizontalItems;
    }
    let index = list.map(function (e) {
      return e.name
    }).indexOf(item.name);
    if(index>-1){
      list.splice(index, 1);
    }

  }

0 个答案:

没有答案