1

I have Dragula set up and working mostly as expected but the styling and animations do not match up with what is on the example page. On the demo page when you start dragging an item you mouse will move a semi-transparent copy of the item until you release it. When I click and drag an item there is no semi-transparent copy and it will not move until I release the item in the new location when it will move as expected.

I have already seen some discussion on this issue (here and here) and have double checked to have include the css on my index page and angular-cli.json page (also trying both and only one at a time to no effect).

css:

 <link rel="stylesheet" type="text/html" href="node_modules/dragula/dist/dragula.css">

angular-cli.json

"styles": [
        "styles.scss",
        "./node_modules/dragula/dist/dragula.css",
      ],

html:

<div [dragula]='"first-bag"' fxLayout="row wrap" fxLayoutAlign="center center" class="full-width equipped-bag">
</div>

 <div 
     fxLayout="row wrap" 
     fxLayoutAlign="center center" 
     [dragula]='"first-bag"'>
        <mat-card *ngFor="let item of itemArray">
            {{ item.name }}
        </mat-card>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
av0000
  • 1,917
  • 6
  • 31
  • 51

1 Answers1

2

Try using an intermediate div before the mat-card, like this. 

<div [dragula]="'first-bag'">
  <div *ngFor="let item of itemArray">
    <mat-card>{{item.name}}</mat-card>
  </div>
</div>
yohosuff
  • 1,359
  • 1
  • 11
  • 19