2

我正在使用 Dragula 在我的桌子上拖放。此外，我正在使用插件 angular resizier 元素来调整表格列的大小Plugin url here。所有这些我一直在 Angular2 中工作。

这是我实现这一目标的部分代码。

<div class="row first-row" [dragula]='"evented-bag"' [dragulaModel]='columns'>

    <div *ngFor="let rowTitle of columns; let i = index" class="col"
         [style.min-width.px]="rowTitle.width" 
         [style.width.px]="rowTitle.width" 
         [attr.column-name]="rowTitle.name"
         mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{bottom: false, right: true, top: false, left: false}"
         [enableGhostResize]="false"
         (resizeEnd)="onResizeEnd($event, rowTitle)">

        <label>
            {{rowTitle.name}}
            <a (click)="sortColumn(rowTitle.key)">
            </a>
        </label>
    </div>
    <div class="col" *ngIf="columnNames.length != 0">
        <label>More</label>
    </div>
</div>

所以，dragula 需要放在 div 之前的 div 上，使用 *ngFor。然后 Dragula 使用每个表格列的全宽。

问题是当我想调整列的大小并且开始拖动右边框（因为我是这样做的）来调整它的大小时，它也开始拖动整个列。在某些情况下，它会调整列的大小，但在大多数情况下，它会移动列。

我尝试过的解决方案的一部分是使 dragula 列更小，而不是在 div 中放置另一个 div，class="col"其中 angular-resizable-element 并在该 div 上添加一些左右填充。但这部分并不成功。

问题：有人可以帮我让Dragula和angular-resizable-element一起工作而不会遇到麻烦。

4

0 回答 0