Question

我正在尝试在我的离子应用程序中实现拖放。我正在使用angular-draggable-droppable。

我的代码如下：

***** 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按钮以圆圈排列。并且是我想要落地的区域。在删除时，用户将被重定向到新页面。

到目前为止，我能够使fab图标可拖动，但是一旦我尝试拖动它就会运行到它应该在将它排列成圆圈之前的初始位置。

我试图修复其中一个按钮，但无法修复所有按钮。请帮助。

Answer 1

嗨大家我能够通过删除webkit-tranform css并使用top和left来实现。

/ HTML /

((IObjectContextAdapter)DbContext).Detach(entity);

如何实现angular-draggable-droppable

1 个答案: