how to implement angular-draggable-droppable

Issue

I am trying to implement drag and drop in my ionic application. I am using angular-draggable-droppable.

My Code goes as under:

*****app.module.ts******

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { DragAndDropModule } from 'angular-draggable-droppable';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NgCircleProgressModule } from 'ng-circle-progress';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    DragAndDropModule.forRoot(),
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#78C000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
    }),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

/**** home.html******/

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>


<ion-card>
  <div class='circle-container'>

 <!--  <a>
    <button  ion-fab class="center" [class.dropOverActive]="dropOverActive" mwlDroppable 
    (dragEnter)="dropOverActive = true" 
  (dragLeave)="dropOverActive = false" (drop)="onDrop($event)" >           
  </button>
</a> -->
<a><div class="center" [class.dropOverActive]="dropOverActive" mwlDroppable 
    (dragEnter)="dropOverActive = true" 
  (dragLeave)="dropOverActive = false" (drop)="onDrop($event)">
  <circle-progress 
  [percent]="85"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"></circle-progress></div>
</a>

     <a>
      <button class='deg0' ion-fab mwlDraggable [style.top.px]="top" [style.right.px]="right" 
      [style.webkitTransform]="webkitTransform" (press)="pressEvent($event);" (dragEnd)="dragEnd($event)" 
      (dragStart)="dragStart($event)">Deg0</button>
    </a>
     <a><button [ngClass]="{'deg45': adddeg45Class}" (dragStart)="dragStart($event)" ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg45</button> </a>
     <a><button class="deg90" ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">Deg90</button> </a>
     <a><button class='deg135' ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg135</button> </a>
     <a><button class='deg180' ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg180</button> </a>
     <a><button class='deg225' ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg225</button> </a>
     <a><button class='deg315' ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg315</button> </a>
     <a><button class="deg360" ion-fab mwlDraggable (press)="pressEvent($event)" (dragEnd)="dragEnd($event)">deg360</button> </a>
 </div>
</ion-card>
<!--Expense drag and drop ends here -->

</ion-content>       

/****home.ts****/

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
deg360 = 'deg360';
top;
right;
webkitTransform;
adddeg45Class: boolean = true;
overlayHidden: boolean = true;
droppedData: string;

  constructor(public navCtrl: NavController) {

  }

   dragEnd(event) {
    console.log('Element was dragged end', event);

    this.right = 20;
  }
  pressEvent(event){
  event.preventDefault();
    this.deg360=" ";
  console.log('Element was tapped',event);
  ;

  }
  onDrop(event){
  console.log('Element was droppped',event);
  this.adddeg45Class = true;
  }
  dragStart(event){
  //alert('drag start');
    this.deg360=" ";
    this.adddeg45Class = false;
    this.right = -120;
    console.log(this.top )
    console.log(this.right )
  }
}

home.scss

page-home {
  .progress-wrapper{
      top:150px!important;
  }
  .progress-wrapper > round-progress {
        display: inline-block!important;
        width: 174px!important;
        height: 233px!important;
  }


  .progress-wrapper{
    position: relative;
}

.progress-wrapper{
    // position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    width: 100%;
    z-index: 1;
    padding:0px;
}
.text{
    // position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    width: 100%;
    z-index: 1;
    font-family: Roboto Medium;
    font-size: 23px;
    color: #f26722;
}
.circle-container {
    position: relative;
    width: 22em;
    height: 24em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    /* border: dashed 1px;*/
    border-radius: 50%;
    margin: 1.75em auto 0;
    top:-10px;
}
.circle-container a {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 4em; height: 4em;
    margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(11em);right:15px; z-index:2;} /*half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(11em) rotate(-45deg);  z-index:2;}
.deg90 { transform: rotate(90deg) translate(11em) rotate(-90deg);top:-8px; z-index:2; }
.deg135 { transform: rotate(135deg) translate(11em) rotate(-135deg);  z-index:2;}
.deg180 { transform: translate(-11em);left:20px; z-index:2; }
.deg225 { 
transform: rotate(225deg) translate(11em) rotate(-225deg);
  z-index:2;}
.deg315 {
 transform: rotate(315deg) translate(11em) rotate(-315deg);
  z-index:2;}
.deg360 { transform: rotate(270deg) translate(11em) rotate(-270deg);  z-index:2;}


.fab {
    contain: layout!important;
}
button[ion-fab] {
        overflow: visible;
        position: relative;

        ion-label {
            position: absolute;
            top: -8px;
            right: 40px;

            color: white;
            background-color: rgba(0,0,0,0.7);
            line-height: 24px;
            padding: 4px 8px;
            border-radius: 4px;
        }
    }

    /*Css for Drag and drop starts here*/
    [mwlDraggable] {
      /*background-color: red;
      width: 200px;
      height: 200px;*/
      position: relative;
      z-index: 1;
      float: left;
      margin-right: 10px;
    }
    [mwlDroppable] {
      background-color: green;
     /* width: 400px;
      height: 400px;

      left: -82px;*/
      position: relative;
          border-radius: 50%;
    width: 13em;
    height: 13em;
        bottom: 62px;
    right: 65px;
    }
    [mwlDraggable],
    [mwlDroppable] {
      color: white;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dropOverActive {
      background-color: lightgreen;
    }
}

fab buttons are arranged in circle. and is the area which I want to be drop-area. On drop, the user will be redirected to the new page.

So far I am able to make fab icons draggable but as soon as I try to drag it runs to its initial position where it should be before arranging it in circle.

I have tried to fix for one of the buttons but not able to fix for all. Kindly help.

Solution

I was able to implement by removing webkit-tranform css and using top and left:

HTML:

    <ion-card color="transparent" class="no-box">
  <ion-icon name="more" md="md-more"  style="float:right;margin-right: 5px;" (click)="editBudget()"></ion-icon>
        <div class='circle-container'>
            <a><div class="center" [class.dropOverActive]="dropOverActive" mwlDroppable
              (dragEnter)="dropOverActive = true"
              (dragLeave)="dropOverActive = false" (drop)="onDrop($event)">
                <circle-progress
                [backgroundColor]="'#FFFFFF'"
                [showBackground]="true"
                [percent]= completePercent
                [maxPercent] = maxPercent
                [showTitle] = "true"
                [title]= "['3,530','Total Spend','', totalBudget, 'Total Budget']"
                [showSubtitle]= "false"
                [radius]= "70"
                [space]= "-12"
                [title]= "Chethan"
                [outerStrokeWidth]= "12"
                [outerStrokeColor]= "'#f0b048'"
                [innerStrokeColor]= "'#e7e8ea'"
                [innerStrokeWidth]= "12"
                [animateTitle]= "true"
                [animation]="true"
                [animationDuration]= "500"
                [showUnits]= "false"
                [titleFontSize]="15"
                [unitsFontSize]="15"
                [showBackground]= "false"
                [clockwise]= "true"
                ></circle-progress>
              </div>
            </a>
            <a><button class='deg0' (dragStart)="dragStart($event)" ion-fab mwlDraggable >Deg0</button></a>
            <a><button class ='deg45' ion-fab mwlDraggable >deg45</button> </a>
            <a><button class="deg90" ion-fab mwlDraggable >Deg90</button> </a>
            <a><button class='deg135' ion-fab mwlDraggable >deg135</button> </a>
            <a><button class='deg180' ion-fab mwlDraggable >deg180</button> </a>
            <a><button class='deg225' ion-fab mwlDraggable >deg225</button> </a>
            <a><button class='deg315' ion-fab mwlDraggable >deg315</button> </a>
            <a><button class="deg360" ion-fab mwlDraggable >deg360</button> </a>
         </div>
    </ion-card>


/*CSS*/

.deg0 {
  left:145px;
   z-index:2;
}
.deg45 {
    top: 110px;
    left: 100px;
    z-index:2;
}
.deg90 {
  top:150px;
 z-index:2; }
.deg135 {
  top: 110px;
    right: 100px;
    z-index:2;}
.deg180 { right:140px;
   z-index:2; }
.deg225 {
  bottom: 110px;
    right: 100px;
    z-index:2;}
.deg315 {
    bottom: 110px;
    left: 100px;
    z-index:2;}
.deg360 { bottom:150px;  z-index:2;}

    [mwlDraggable] {
      position: relative;
      z-index: 1;
      float: left;
      margin-right: 10px;
    }
    [mwlDroppable] {
      background-color: green;       
      position: relative;
      border-radius: 50%;
      width: 13em;
      height: 13em;
      bottom: 52px;
      right: 57px;
    }
    [mwlDraggable],[mwlDroppable] {
      color: white;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dropOverActive {
      background-color: lightgreen;
    }

Answered By - Amit