1

我想使用 ng2-dragula 来构建基于拖放网格的体验。似乎 ng2-dragula 是要走的路。

我将它导入到一个空白项目中，如果我有一个简单的垂直列表（如下）。它工作正常。

在此处输入图像描述

现在，如果我想让它成为一个水平列表 - 拖动已经有轻微的延迟或不精确：

在此处输入图像描述

最后，如果我把屏幕保持得足够小，让它变成一个网格——体验会更糟；（它不精确，而且很难拖放。

在此处输入图像描述

问题： - 是否可以将 ng2-dragula 用于网格用例？文档对此没有示例或指导。我想念什么才能使它真正起作用？

我的空白应用代码如下：

import {
  Component,
  Renderer2,
  ViewChild,
  ElementRef
} from '@angular/core';
import {
  NavController
} from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('thegrid') gridElement: ElementRef;

  dragTarget: any = null;
  grid: any;
  items: Array < any > ;
  placeholder = {
    index: 11,
    style: {
      background: "black"
    },
    class: {
      gridItem: true, dragged: false
    }
  }

  constructor(
    public navCtrl: NavController,
    public renderer: Renderer2
  ) {

    this.items = [{
        index: 0
      },
      {
        index: 1
      },
      {
        index: 2
      },
      {
        index: 3
      },
      {
        index: 4
      },
      {
        index: 5
      },
      {
        index: 6
      },
      {
        index: 7
      },
      {
        index: 8
      },
      {
        index: 9
      },
      {
        index: 10
      }
    ]

  }
}
page-home {
  .noscroll {
    overflow: hidden;
  }
  .gridItem {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
  .gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  .gu-hide {
    display: none !important;
  }
  .gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  .gu-transit {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
  }
}
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content no-padding no-bounce class="noscroll">
  <div [dragula]='"bag"' [dragulaModel]='items'>
    <div class="gridItem" *ngFor="let item of items">
      {{ item.index }}
    </div>
  </div>
</ion-content>

4

0 回答 0