javascript - ng2-dragula dropzone の改善方法

Question

私はng2-dragulaを使用して、trello や MS Tasks によく似た単純なかんばんボードのコピーを作成しています。

うまく機能しますが、列を右にドラッグしようとすると、ドロップ ゾーンが少し外れます。ドロップゾーンを表示/アクティブ化するには、カーソルをいじる必要があります。

奇妙なことに、列を左にドラッグすると、問題なく動作します。そして、私の todos は左右両方ともうまくドラッグされます...

私は小さなスクリーン キャストを youtube にアップロードしました。

左から右への列のドラッグを改善できるという考えはありますか?

これは、列のマークアップを含む、ボード コンテンツ コンポーネントの html マークアップです。

<!-- columns -->
<div *ngIf="columns === undefined; else showColumns"></div>
<ng-template #showColumns>

    <!-- dragula column bag -->
    <div [dragula]="'column-bag'" [dragulaModel]='columns'>
        <div *ngFor="let column of columns">

            <div class="card">
                <div *ngIf="selectedColumn === undefined || selectedColumn._id !== column._id; else showUpdateForm">

                    <!-- title -->
                    <h4 class="card-title">
                        <label (click)="selectColumn(column)" for="title">{{ column.title }}</label>

                        <!-- delete column button -->
                        <i class="fa fa-trash text-danger" aria-hidden="true" (click)="deleteColumn(column)"></i>
                    </h4>


                    <!-- todos -->
                    <todo [column]="column"></todo>

                </div>
            </div>

            <!-- update form -->
            <ng-template #showUpdateForm>

                <!-- form -->
                <form (ngSubmit)="updateColumn()" #columnUpdateForm="ngForm" class="form column-update-form">

                    <!-- title -->
                    <div class="form-group">
                        <label for="title"></label>
                        <input type="text" name="title" [(ngModel)]="selectedColumn.title" placeholder="title" id="title" required>
                    </div>

                    <!-- submit -->
                    <button type="submit" [disabled]="!columnUpdateForm.form.valid" class="btn btn-success">Update</button>

                </form>
            </ng-template>
        </div>
    </div>
</ng-template>

そして、私のtodoコンポーネントは、ちょうど良い尺度です

<!-- todos -->
    <div *ngIf="todos === undefined; else showTodos"></div>
    <ng-template #showTodos>

        <!-- todo dragular bag -->
        <div [dragula]='"todo-bag"' [dragulaModel]='todos' class="todo-bag">

            <div class="card card-outline-primary mt-3 todo-card-part" *ngFor="let todo of todos">
                <div *ngIf="selectedTodo === undefined || selectedTodo._id !== todo._id; else showTodoUpdateForm">

                    <div class="card-title todo-card-part">

                        <!-- title -->
                        <h4 class="ml-2 mt-2 todo-card-part">
                            {{ todo.title }}
                            <i class="fa fa-trash text-danger todo-card-part" aria-hidden="true" (click)="deleteTodo(todo)"></i>
                            <i class="fa fa-pencil text-info todo-card-part" aria-hidden="true" (click)="selectTodo(todo)"></i>
                        </h4>

                        <!-- details -->
                        <p class="ml-2 mt-2 todo-card-part">{{ todo.details }}</p>

                    </div>
                </div>

                <!-- update form -->
                <ng-template #showTodoUpdateForm>

                    <!-- form -->
                    <form (ngSubmit)="updateTodo()" #todoUpdateForm="ngForm" class="form todo-update-form">

                        <!-- title -->
                        <div class="form-group">
                            <label for="todoTitle"></label>
                            <input type="text" name="title" [(ngModel)]="selectedTodo.title" placeholder="title" id="todoTitle" required>
                        </div>

                        <!-- details -->
                        <div class="form-group">
                            <label for="todoTitle"></label>
                            <textarea rows="5" cols="20" name="details" [(ngModel)]="selectedTodo.details" placeholder="details" id="details"></textarea>
                        </div>

                        <!-- submit -->
                        <button type="submit" [disabled]="!todoUpdateForm.form.valid" class="btn btn-success">Update</button>

                    </form>
                </ng-template>

            </div>
        </div>
    </ng-template>