angular實現draggable拖拽

前言：最近項目要實現一個拖拽功能，我在網上開始了各類搜尋，雖然后面因為數據原因舍棄了拖拽的這一需求，但是為了不辜負最近的研究，還是來記錄一下。

場景需求：面試預約選時間節點，候選人之間是可以相互交換的，但是局限於面試方向相同的候選人才能相互拖拽（拖拽后即表示兩個候選人之間交換面試時間）。本來此種場景上圖更為明確，奈何公司只限於內網開發，上傳不了圖片，嚶嚶嚶。。。

參考文章：https://www.cnblogs.com/starof/p/10662027.html

正文：

draggable是H5新增的屬性，true表示可以拖拽,false表示不能拖拽。在拖拽過程中分別有兩個元素：被拖動元素與目標元素。

被拖動元素相關的事件：

• ondragstart：按下鼠標並開始移動時觸發該事件。
• ondrag：在start事件觸發后被觸發，並在鼠標移動過程中不停被觸發。
• ondragend：當拖動停止觸發（無論把元素放到拖放目標上還是在無效目標上）

目標元素相關的事件：

• ondragenter：被拖動元素進入目標時觸發。
• ondragover：被拖動元素在目標元素上移動時被觸發。
• ondragleave：被拖動元素離開目標時觸發，即拖到無效目標時。
• ondrop：被拖動元素被放置在目標上時被觸發。

注意：默認情況下目標元素是不允許被放置的，所以不會觸發drop事件。這時需要在ondragover中阻止默認行為才能成為被允許放置的目標。

對於angular、vue等依賴組件開發的框架，最好把draggable封裝成指令去實現功能。（實施步驟與參考文章無異，直接上代碼啦，其他不贅述）具體步驟：

1.新建directives指令文件夾

2.新建拖拽文件夾directives/drap-drop

3.新建drap指令文件directives/drag-drop/drag.directive.ts

4.新建drop指令文件directives/drag-drop/drop.directive.ts

5.因為涉及數據交換，所以要新建一個services來傳遞數據，directives/directives.services.ts

6.新建directives/directives.module.ts

7.在公共模板中引入DirectiveModule

8.引用

directives.module.ts

 

import { NgModule } from '@angular/core';
import { DragDirective } from './drag-drop/drag.directive';
import { DropDirective } from './drag-drop/drop.directive';
import { DragDropService } from './drag-drop/drag-drop.service';
@NgModule({
  declarations: [DragDirective, DropDirective],
  exports: [DragDirective, DropDirective],
  providers:[DragDropService]
})
export class DirectiveModule { }

 

drag.directive.ts

 

import { Directive,HostBinding, HostListener, Host, ElementRef, Renderer2, Input,Output,EventEmitter } from '@angular/core';
import {DragDropService} from './drag-drop.service';
@Directive({
  selector: '[app-draggable][dragTag][dragData][draggedClass]'
})
export class DragDirective {
  private _isDraggble = false;
/*給標簽設置draggable屬性
 *true-能拖拽
 *false-不能拖拽
 */
  @Input('app-draggable')
  set isDraggable(value:boolean){
    this._isDraggble=value;
    this.rd.setAttribute(this.el.nativeElement,'draggable',`${value}`);
  }
  get isDraggable(){
    return this._isDraggble;
  }

  //拖拽開始時添加的class
  @Input()
  draggedClass:string;

  //給拖拽的元素定義dragTag標識（目標元素也會設置一個標識，用於判斷該元素是否能拖到目標元素）
  @Input()
  dragTag:any;

  //給DragDropservice傳遞的數據（即目標元素的數據）
  @Input()
  dragData:any

  //判斷開始/結束拖拽時，部分區域的元素是不能設置為拖拽目標的（給不能拖拽的區域設置背景色）
  @Output()
  dragStart = new EventEmitter<any>();
  @Output()
  dragEnd = new EventEmitter<any>();

  constructor(private el:ElementRef, private rd:Renderer2,private service:DragDropService) { }

  @HostListener('dragstart', ['$event'])
  ondragstart(ev:Event){
    //判斷drag元素是不是指令應用的元素發起的
    if(this.el.nativeElement===ev.target){
      this.rd.addClass(this.el.nativeElement, this.draggedClass);//往el上增加一個class
      //進入時候給service傳遞上數據
      this.service.setDragData({tag:this.dragTag,data:this.dragData});
      ev['dataTransfer'].setData('tag',this.dragTag);//兼容firefox,用來設置拖放操作的drag data到指定的數據和類型
      this.dragStart.emit(this.dragTag);
    }

  }

  @HostListener('dragend', ['$event'])
  ondragend(ev:Event){
    if(this.el.nativeElement===ev.target){
      this.rd.removeClass(this.el.nativeElement, this.draggedClass);
      this.dragEnd.emit(this.dragTag);
    }
  }
}

 

drop.directive.ts

 

import { Directive, HostListener, ElementRef, Renderer2, Input, Output, EventEmitter  } from '@angular/core';
import { DragDropService, DragData } from './drag-drop.service';
import { take } from 'rxjs/operators';

@Directive({
  selector: '[dropTag]'
})
export class DropDirective {
  /*拖拽至目標元素時發射的事件*/
  @Output()
  dropped = new EventEmitter<DragData>();

  /*設定目標區域的標識*/
  @Input()
  dropTag:any;
  
  private data$;
  constructor(private el:ElementRef, private rd:Renderer2,private service:DragDropService) { 
    this.data$ = this.service.getDragData().pipe(take(1));
  }

  @HostListener('dragenter', ['$event'])
  onDragEnter(ev:Event){
    //判斷drag元素是不是指令應用的元素發起的
    if(this.el.nativeElement===ev.target){
      this.data$.subscribe(dragData=>{
        if(dragData && this.dropTag == dragData.tag){
          
        }
      });
    }
  }


  //dragover允許進行data transfer的一些特效
  @HostListener('dragover', ['$event'])
  onDragOver(ev:Event){
    //需要支持多級拖拽，所以要防止事件冒泡
    ev.preventDefault(); 
    ev.stopPropagation();
    if(this.el.nativeElement===ev.target){ 
      this.data$.subscribe(dragData=>{
        if(dragData && this.dropTag == dragData.tag){
          this.rd.setProperty(ev,'dataTransfer.effectAllowed','all');
          this.rd.setProperty(ev,'dataTransfer.fropEffect','move');
        }else{
          this.rd.setProperty(ev,'dataTransfer.effectAllowed','none');
          this.rd.setProperty(ev,'dataTransfer.dropEffect','none');
        }
      });
    }
  }

  @HostListener('dragleave', ['$event'])
  onDragLeave(ev:Event){
    ev.preventDefault();
    ev.stopPropagation();
    if(this.el.nativeElement===ev.target){      
      this.data$.subscribe(dragData=>{
        if(dragData && this.dropTag == dragData.tag){
          
        }
      });
    }

  }

  @HostListener('drop', ['$event'])
  onDrop(ev:Event){
    ev.preventDefault();
    ev.stopPropagation();
    if(this.el.nativeElement===ev.target){  
      this.data$.subscribe(dragData => {
        if(dragData && this.dropTag == dragData.tag){          
          this.dropped.emit(dragData);//drop的時候把dragData發射出去
          this.service.clearDragData(); //drop的時候把data clear掉，否則會影響下一次拖拽
        }
      });
    }

  }
}

 

 

 

 

 

directives.services.ts

 

import { Injectable } from '@angular/core';
import { Observable,BehaviorSubject } from 'rxjs';

//數據結構
export interface DragData{
  tag:string; //多重拖拽的話是哪一級拖拽，用戶自己保證唯一性，不能重復
  data:any; //傳遞的數據
}


@Injectable({
  providedIn: 'root'
})
export class DragDropService {
  //用BehaviorSubject總能記住上一次的值
  private _dragData = new BehaviorSubject<DragData>(null);  
  setDragData(data:DragData){
    this._dragData.next(data);
  }

  getDragData():Observable<DragData>{
    return this._dragData.asObservable();
  }

  clearDragData(){
    this._dragData.next(null);
  }
  constructor() { }
}

 

公共模板common.module.ts中引入DirectiveModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgZorroAntdModule} from '../zorro/ng-zorro-antd.module';
import {NzPaginationUpComponent} from "./nzPaginationUp.component";
import {DirectiveModule} from "./directives/directives.module";
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgZorroAntdModule,
    DirectiveModule
  ],
  declarations: [
    NzPaginationUpComponent,
    
  ],
  exports: [
    NzPaginationUpComponent,
    DirectiveModule
    
  ],
   providers: [LoadingBarService, DateHelper]
})
export class CoreFrameCommonModule {

}

引用：

test.component.html

<table>
  <tr>
    <td class="b-n-t b-n-l b-n-b b-n-r" width="80"></td>
    <td class="b-n-t b-n-l b-n-b" width="50"></td>
    <ng-template ngFor let-item [ngForOf]="menuContent[0].dateArr">
      <td>{{item.week}}</td>
    </ng-template>
  </tr>
  <tr>
    <td class="b-n-t b-n-l b-n-r"></td>
    <td class="b-n-t b-n-l"></td>
    <ng-template ngFor let-item [ngForOf]="menuContent[0].dateArr">
      <td>{{item.date}}</td>
    </ng-template>
  </tr>
  <tr *ngFor="let group of menuContent">
    <td>{{group.groupName}}</td>
    <!--時間點-start-->
    <td>
      <div class="time-box" *ngFor="let etc of group.dateArr[0].etc">
          <ng-template ngFor let-dateItem [ngForOf]="etc.detail">
            <div class="time-item">{{dateItem.time}}</div>
          </ng-template>
        </div>
    </td>
    <!--時間點-end-->
    <!--坑-start-->
    <ng-template ngFor let-item0 [ngForOf]="group.dateArr">
      <td>
        <div class="name-box" [ngClass]="{'no-drop': dragCurrentDirect && item1.direct != dragCurrentDirect}" *ngFor="let item1 of item0.etc">
          <ng-template ngFor let-item2 [ngForOf]="item1.detail">
            <div class="name-item">
                <div [app-draggable]="true"
                  draggedClass="drag-start"
                  [dragTag]="item2['direct']"
                  [dragData]="item2"
                  (dragStart)="moveStart($event)"
                  (dragEnd)="moveEnd($event)"
                  [dropTag]="item2['direct']"
                  (dropped)="handleMove($event,item2)">{{item2.name}}</div>
            </div>
          </ng-template>
        </div>
      </td>
    </ng-template>
    <!--坑-end-->
  </tr>
</table>

test.component.scss

.box{
  padding:20px;
  border:2px solid #ddd;
  div{
    margin-bottom:10px;
    height:100px;
    text-align:center;
    line-height:100px;
    background:#fff;
    border-radius:4px;
  }
}
table{
  width:800px;
  table-layout:fixed;
  border-collapse:collapse;
  background:#fff;
  .time-item,.name-item{
    line-height:30px;
    height:30px;
    border-bottom:1px solid #999;
  }
  .time-box:last-child .time-item:last-child{border-bottom:0;}
  .name-box:last-child .name-item:last-child{border-bottom:0;}
  .name-item{
    cursor:pointer;
    div{height:30px;}
    .drag-start{
      color:#fff;
      background:#c8152d;
      opacity:.8;
      }
  }
}
th,td{
  border:1px #525152 solid;
  text-align:center;
  line-height:40px;
}
.no-drop{background-color:#ddd;}
.b-n-t{border-top:1px solid transparent}
.b-n-l{border-left:1px solid transparent}
.b-n-b{border-bottom:1px solid transparent}
.b-n-r{border-right:1px solid transparent}

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  dragCurrentDirect:string;//用於判斷拖拽的是否是有效的目標
  menuContent=[
    {groupName:'A組',dateArr:[
      {week:'星期一',date:'11月4日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張1',sapId:'001',direct:'C#',boxId:'1'},
            {time:'8:00',name:'張2',sapId:'002',direct:'C#',boxId:'2'},
            {time:'8:40',name:'張3',sapId:'003',direct:'C#',boxId:'3'},
            {time:'9:00',name:'張4',sapId:'004',direct:'C#',boxId:'4'},
            {time:'9:20',name:'張5',sapId:'005',direct:'C#',boxId:'5'},
            {time:'9:40',name:'張6',sapId:'006',direct:'C#',boxId:'6'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王1',sapId:'007',direct:'Java',boxId:'7'},
            {time:'10:20',name:'王2',sapId:'008',direct:'Java',boxId:'8'},
            {time:'11:00',name:'王3',sapId:'009',direct:'Java',boxId:'9'},
            {time:'11:20',name:'王4',sapId:'0010',direct:'Java',boxId:'10'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉1',sapId:'0011',direct:'前端',boxId:'11'},
            {time:'14:20',name:'劉2',sapId:'0012',direct:'前端',boxId:'12'},
            {time:'14:40',name:'劉3',sapId:'0013',direct:'前端',boxId:'13'},
            {time:'15:00',name:'劉4',sapId:'0014',direct:'前端',boxId:'14'},
            {time:'15:20',name:'劉5',sapId:'0015',direct:'前端',boxId:'15'},
            {time:'15:40',name:'劉6',sapId:'0016',direct:'前端',boxId:'16'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周1',sapId:'0011',direct:'Java',boxId:'17'},
            {time:'16:20',name:'周2',sapId:'0012',direct:'Java',boxId:'18'},
            {time:'16:40',name:'周3',sapId:'0013',direct:'Java',boxId:'19'},
            {time:'17:00',name:'周4',sapId:'0014',direct:'Java',boxId:'20'}
        ]}
      ]},  
      {week:'星期二',date:'11月5日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張111',sapId:'0035',direct:'C#',boxId:'21'},
            {time:'8:00',name:'張112',sapId:'0036',direct:'C#',boxId:'22'},
            {time:'8:40',name:'張113',sapId:'0037',direct:'C#',boxId:'23'},
            {time:'9:00',name:'張114',sapId:'0038',direct:'C#',boxId:'24'},
            {time:'9:20',name:'張115',sapId:'0039',direct:'C#',boxId:'25'},
            {time:'9:40',name:'張116',sapId:'0040',direct:'C#',boxId:'26'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王111',sapId:'0041',direct:'Java',boxId:'27'},
            {time:'10:20',name:'王112',sapId:'0042',direct:'Java',boxId:'28'},
            {time:'11:00',name:'王113',sapId:'0043',direct:'Java',boxId:'29'},
            {time:'11:20',name:'王114',sapId:'0044',direct:'Java',boxId:'30'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉111',sapId:'0045',direct:'前端',boxId:'31'},
            {time:'14:20',name:'劉112',sapId:'0046',direct:'前端',boxId:'32'},
            {time:'14:40',name:'劉113',sapId:'0047',direct:'前端',boxId:'33'},
            {time:'15:00',name:'劉114',sapId:'0048',direct:'前端',boxId:'34'},
            {time:'15:20',name:'劉115',sapId:'0049',direct:'前端',boxId:'35'},
            {time:'15:40',name:'劉116',sapId:'0050',direct:'前端',boxId:'36'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周111',sapId:'0051',direct:'Java',boxId:'37'},
            {time:'16:20',name:'周112',sapId:'0052',direct:'Java',boxId:'38'},
            {time:'16:40',name:'周113',sapId:'0053',direct:'Java',boxId:'39'},
            {time:'17:00',name:'周114',sapId:'0054',direct:'Java',boxId:'40'}
        ]}
      ]},
      {week:'星期四',date:'11月7日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張1111',sapId:'0075',direct:'C#',boxId:'41'},
            {time:'8:00',name:'張1112',sapId:'0076',direct:'C#',boxId:'42'},
            {time:'8:40',name:'張1113',sapId:'0077',direct:'C#',boxId:'43'},
            {time:'9:00',name:'張1114',sapId:'0078',direct:'C#',boxId:'44'},
            {time:'9:20',name:'張1115',sapId:'0079',direct:'C#',boxId:'45'},
            {time:'9:40',name:'張1116',sapId:'0080',direct:'C#',boxId:'46'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王1111',sapId:'0081',direct:'Java',boxId:'47'},
            {time:'10:20',name:'王1112',sapId:'0082',direct:'Java',boxId:'48'},
            {time:'11:00',name:'王1113',sapId:'0083',direct:'Java',boxId:'49'},
            {time:'11:20',name:'王1114',sapId:'0084',direct:'Java',boxId:'50'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉1111',sapId:'0085',direct:'前端',boxId:'51'},
            {time:'14:20',name:'劉1112',sapId:'0086',direct:'前端',boxId:'52'},
            {time:'14:40',name:'劉1113',sapId:'0087',direct:'前端',boxId:'53'},
            {time:'15:00',name:'劉1114',sapId:'0088',direct:'前端',boxId:'54'},
            {time:'15:20',name:'劉1115',sapId:'0089',direct:'前端',boxId:'55'},
            {time:'15:40',name:'劉1116',sapId:'0090',direct:'前端',boxId:'56'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周1111',sapId:'0091',direct:'Java',boxId:'57'},
            {time:'16:20',name:'周1112',sapId:'0092',direct:'Java',boxId:'58'},
            {time:'16:40',name:'周1113',sapId:'0093',direct:'Java',boxId:'59'},
            {time:'17:00',name:'周1114',sapId:'0094',direct:'Java',boxId:'60'}
        ]},
      ]},  
      {week:'星期五',date:'11月8日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張11111',sapId:'00205',direct:'C#',boxId:'61'},
            {time:'8:00',name:'張11112',sapId:'00206',direct:'C#',boxId:'62'},
            {time:'8:40',name:'張11113',sapId:'00207',direct:'C#',boxId:'63'},
            {time:'9:00',name:'張11114',sapId:'00208',direct:'C#',boxId:'64'},
            {time:'9:20',name:'張11115',sapId:'00209',direct:'C#',boxId:'65'},
            {time:'9:40',name:'張11116',sapId:'00210',direct:'C#',boxId:'66'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王11111',sapId:'00211',direct:'Java',boxId:'67'},
            {time:'10:20',name:'王11112',sapId:'00212',direct:'Java',boxId:'68'},
            {time:'11:00',name:'王11113',sapId:'00213',direct:'Java',boxId:'69'},
            {time:'11:20',name:'王11114',sapId:'00214',direct:'Java',boxId:'70'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉11111',sapId:'00215',direct:'前端',boxId:'71'},
            {time:'14:20',name:'劉11112',sapId:'00216',direct:'前端',boxId:'72'},
            {time:'14:40',name:'劉11113',sapId:'00217',direct:'前端',boxId:'73'},
            {time:'15:00',name:'劉11114',sapId:'00218',direct:'前端',boxId:'74'},
            {time:'15:20',name:'劉11115',sapId:'00219',direct:'前端',boxId:'75'},
            {time:'15:40',name:'劉11116',sapId:'00220',direct:'前端',boxId:'76'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周11111',sapId:'00221',direct:'Java',boxId:'77'},
            {time:'16:20',name:'周11112',sapId:'00222',direct:'Java',boxId:'78'},
            {time:'16:40',name:'周11113',sapId:'00223',direct:'Java',boxId:'79'},
            {time:'17:00',name:'周11114',sapId:'00224',direct:'Java',boxId:'80'}
        ]},
      ]}
    ]},
    {groupName:'B組',dateArr:[
        {week:'星期一',date:'11月4日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'',sapId:'',direct:'C#',boxId:'81'},
            {time:'8:00',name:'',sapId:'',direct:'C#',boxId:'82'},
            {time:'8:40',name:'張13',sapId:'0017',direct:'C#',boxId:'83'},
            {time:'9:00',name:'張14',sapId:'0018',direct:'C#',boxId:'84'},
            {time:'9:20',name:'張15',sapId:'0019',direct:'C#',boxId:'85'},
            {time:'9:40',name:'張16',sapId:'0020',direct:'C#',boxId:'86'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王11',sapId:'0021',direct:'Java',boxId:'87'},
            {time:'10:20',name:'王12',sapId:'0022',direct:'Java',boxId:'88'},
            {time:'11:00',name:'王13',sapId:'0023',direct:'Java',boxId:'89'},
            {time:'11:20',name:'王14',sapId:'0024',direct:'Java',boxId:'90'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉11',sapId:'0025',direct:'前端',boxId:'91'},
            {time:'14:20',name:'劉12',sapId:'0026',direct:'前端',boxId:'92'},
            {time:'14:40',name:'劉13',sapId:'0027',direct:'前端',boxId:'93'},
            {time:'15:00',name:'劉14',sapId:'0028',direct:'前端',boxId:'94'},
            {time:'15:20',name:'劉15',sapId:'0029',direct:'前端',boxId:'95'},
            {time:'15:40',name:'劉16',sapId:'0030',direct:'前端',boxId:'96'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周11',sapId:'0031',direct:'Java',boxId:'97'},
            {time:'16:20',name:'',sapId:'',direct:'Java',boxId:'98'},
            {time:'16:40',name:'周13',sapId:'0033',direct:'Java',boxId:'99'},
            {time:'17:00',name:'周14',sapId:'0034',direct:'Java',boxId:'100'}
        ]},
      ]},
        {week:'星期二',date:'11月5日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張1111',sapId:'0055',direct:'C#',boxId:'101'},
            {time:'8:00',name:'張1112',sapId:'0056',direct:'C#',boxId:'102'},
            {time:'8:40',name:'張1113',sapId:'0057',direct:'C#',boxId:'103'},
            {time:'9:00',name:'張1114',sapId:'0058',direct:'C#',boxId:'104'},
            {time:'9:20',name:'張1115',sapId:'0059',direct:'C#',boxId:'105'},
            {time:'9:40',name:'張1116',sapId:'0060',direct:'C#',boxId:'106'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王1111',sapId:'0061',direct:'Java',boxId:'107'},
            {time:'10:20',name:'王1112',sapId:'0062',direct:'Java',boxId:'108'},
            {time:'11:00',name:'王1113',sapId:'0063',direct:'Java',boxId:'109'},
            {time:'11:20',name:'王1114',sapId:'0064',direct:'Java',boxId:'110'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉1111',sapId:'0065',direct:'前端',boxId:'111'},
            {time:'14:20',name:'劉1112',sapId:'0066',direct:'前端',boxId:'112'},
            {time:'14:40',name:'劉1113',sapId:'0067',direct:'前端',boxId:'113'},
            {time:'15:00',name:'劉1114',sapId:'0068',direct:'前端',boxId:'114'},
            {time:'15:20',name:'劉1115',sapId:'0069',direct:'前端',boxId:'115'},
            {time:'15:40',name:'劉1116',sapId:'0070',direct:'前端',boxId:'116'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周1111',sapId:'0071',direct:'Java',boxId:'117'},
            {time:'16:20',name:'周1112',sapId:'0072',direct:'Java',boxId:'118'},
            {time:'16:40',name:'周1113',sapId:'0073',direct:'Java',boxId:'119'},
            {time:'17:00',name:'周1114',sapId:'0074',direct:'Java',boxId:'120'}
        ]},
      ]},
        {week:'星期四',date:'11月7日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張11111',sapId:'0095',direct:'C#',boxId:'121'},
            {time:'8:00',name:'張11112',sapId:'0096',direct:'C#',boxId:'122'},
            {time:'8:40',name:'張11113',sapId:'0097',direct:'C#',boxId:'123'},
            {time:'9:00',name:'張11114',sapId:'0098',direct:'C#',boxId:'124'},
            {time:'9:20',name:'張11115',sapId:'0099',direct:'C#',boxId:'125'},
            {time:'9:40',name:'張11116',sapId:'00100',direct:'C#',boxId:'126'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王11111',sapId:'00101',direct:'Java',boxId:'127'},
            {time:'10:20',name:'王11112',sapId:'00102',direct:'Java',boxId:'128'},
            {time:'11:00',name:'王11113',sapId:'00103',direct:'Java',boxId:'129'},
            {time:'11:20',name:'王11114',sapId:'00104',direct:'Java',boxId:'130'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉11111',sapId:'00105',direct:'前端',boxId:'131'},
            {time:'14:20',name:'劉11112',sapId:'00106',direct:'前端',boxId:'132'},
            {time:'14:40',name:'劉11113',sapId:'00107',direct:'前端',boxId:'133'},
            {time:'15:00',name:'劉11114',sapId:'00108',direct:'前端',boxId:'134'},
            {time:'15:20',name:'劉11115',sapId:'00109',direct:'前端',boxId:'135'},
            {time:'15:40',name:'劉11116',sapId:'00200',direct:'前端',boxId:'136'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周11111',sapId:'00201',direct:'Java',boxId:'137'},
            {time:'16:20',name:'周11112',sapId:'00202',direct:'Java',boxId:'138'},
            {time:'16:40',name:'周11113',sapId:'00203',direct:'Java',boxId:'139'},
            {time:'17:00',name:'周11114',sapId:'00204',direct:'Java',boxId:'140'}
        ]},
      ]},  
        {week:'星期五',date:'11月8日',etc:[
        {direct:'C#',detail:[
            {time:'8:00',name:'張111111',sapId:'00225',direct:'C#',boxId:'141'},
            {time:'8:00',name:'張111112',sapId:'00226',direct:'C#',boxId:'142'},
            {time:'8:40',name:'張111113',sapId:'00227',direct:'C#',boxId:'143'},
            {time:'9:00',name:'張111114',sapId:'00228',direct:'C#',boxId:'144'},
            {time:'9:20',name:'張111115',sapId:'00229',direct:'C#',boxId:'145'},
            {time:'9:40',name:'張111116',sapId:'00230',direct:'C#',boxId:'146'}
        ]},
        {direct:'Java',detail:[
            {time:'10:00',name:'王111111',sapId:'00231',direct:'Java',boxId:'147'},
            {time:'10:20',name:'王111112',sapId:'00232',direct:'Java',boxId:'148'},
            {time:'11:00',name:'王111113',sapId:'00233',direct:'Java',boxId:'149'},
            {time:'11:20',name:'王111114',sapId:'00234',direct:'Java',boxId:'150'}
        ]},
        {direct:'前端',detail:[
            {time:'13:40',name:'劉111111',sapId:'00235',direct:'前端',boxId:'151'},
            {time:'14:20',name:'劉111112',sapId:'00236',direct:'前端',boxId:'152'},
            {time:'14:40',name:'劉111113',sapId:'00237',direct:'前端',boxId:'153'},
            {time:'15:00',name:'劉111114',sapId:'00238',direct:'前端',boxId:'154'},
            {time:'15:20',name:'劉111115',sapId:'00239',direct:'前端',boxId:'155'},
            {time:'15:40',name:'劉111116',sapId:'00240',direct:'前端',boxId:'156'}
        ]},
        {direct:'Java',detail:[
            {time:'16:00',name:'周111111',sapId:'00241',direct:'Java',boxId:'157'},
            {time:'16:20',name:'周111112',sapId:'00242',direct:'Java',boxId:'158'},
            {time:'16:40',name:'周111113',sapId:'00243',direct:'Java',boxId:'159'},
            {time:'17:00',name:'周111114',sapId:'00244',direct:'Java',boxId:'160'}
        ]}
      ]}
    ]}
  ]
  constructor() { }

  ngOnInit() {
  }
  moveStart(directname){
    this.dragCurrentDirect = directname;
  }
  moveEnd(directname){
    this.dragCurrentDirect = '';
  }
  handleMove(fromData,toData){
    let oldItem = JSON.parse(JSON.stringify(fromData.data));
    let newItem = JSON.parse(JSON.stringify(toData));
    console.log(fromData,toData);
    this.menuContent.forEach(item0=>{
        item0.dateArr.forEach(item1=>{
            item1.etc.forEach(item2=>{
                item2.detail.forEach(item3=>{
                    if(oldItem.boxId == item3.boxId){
                        item3.sapId = newItem.sapId;
                        item3.name = newItem.name;
                    }
                    if(newItem.boxId == item3.boxId){
                        item3.sapId = oldItem.sapId;
                        item3.name = oldItem.name;
                    }
                })
            })
        })
    })
  }
}