切换div启用拖动事件angular2

Question

1：Angular 2 toggle div http://plnkr.co/edit/xLvfJMdB8zQFlUFFeSvp?p=preview

这是用于视图的HTML代码

  <div class="myContainer">
       <div class="tog-button" [ngClass]="{'Off':!showOnbutton,'On':showOnbutton}">
         <div class="tog-button-off"  (click)="showOnbutton = !showOnbutton;updateClick();">
         </div>
         <div class="tog-button-on" [ngClass]="{'On':showOnbutton,'Off':!showOnbutton}" (click)="showOnbutton = !showOnbutton;updateClick();">
           {{clickData}}
         </div>
      </div>
    </div>

与组件相关的css代码

 .myContainer{
      width:100px;
}


.tog-button{
      height: 37px;
      // -webkit-box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
      // box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
      //background-image: -webkit-linear-gradient(-57deg, #fffefe 51%, transparent 0%);
      border: solid 2px #E86056;
  }

  .tog-button-on{
        height: 35px;
        width: 55%;
        text-align: center;
        background-color: #E86056;
        color: white;
       // background-image: -webkit-linear-gradient(196deg, #fffefe 8%, transparent 0);
        /* background-color: #E86056; */
        -webkit-clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
        clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
        padding-top: 8px;
        cursor: pointer;
   }

    .tog-button-off{
        background-color: white;
        height: 30px;
        width: 51%;
        float: right;
        text-align: center;
        color: #E8E8E8;
        padding: 3px;
        padding-left: 15%;
        cursor: pointer;
        /* border: 1px solid #E8E8E8; */
      }


      .tog-button-on.Off{
          background-color: #B2B2B2;
          transform: translateX(43px);
          transition: all 0.2s linear;
          -webkit-clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
          clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
      }

      .tog-button.Off{
           border:2px solid #B2B2B2;
       }

      .tog-button-on.On{
           background-color: #E86056;
           transform: translateX(0px);
           transition: all 0.2s linear;
           -webkit-clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
           clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
       }

      .tog-button.On{
           border:2px solid #E86056;
       }

组件ts文件

    export class ToggleComponent {
       private showOnbutton:boolean = true;

   private clickData:string = "ON";

   constructor(){
     this.clickData = "ON";
     this.showOnbutton = true;
   }

   private updateClick(){
      if(this.showOnbutton){
          this.clickData = "ON";
      }else{
          this.clickData = "OFF";
      }
   }
}

我已添加2个div的幻灯片动画，角度为2想让它也能用于拖动事件，目前onclick它的动画并显示其他div