1

我正在使用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>
4

0 回答 0