ng2 - Dragula动画和样式无法正确导入

时间:2018-04-19 19:56:48

标签: javascript css angular ng2-dragula

我让Dragula设置和工作大部分都符合预期,但样式和动画与示例页面上的内容不匹配。在开始拖动项目的演示页面上,鼠标将移动项目的半透明副本,直到您将其释放。当我单击并拖动一个项目时,没有半透明副本,它将不会移动,直到我在新位置释放该项目时它将按预期移动。

我已经看过一些关于这个问题的讨论(herehere)并且已经仔细检查过在我的索引页面和angular-cli.json页面中包含了css(同时尝试了两者和只有一个一次没有效果)。任何指针都将不胜感激!

的CSS:

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

角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> 

1 个答案:

答案 0 :(得分:0)

尝试在辅助卡之前使用中间div,如下所示。

<div [dragula]="'first-bag'">
  <div *ngFor="let item of itemArray">
    <mat-card>{{item.name}}</mat-card>
  </div>
</div>