angular - ng2-dragula ベースのグリッドの何が問題になっていますか?

Question

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>