我使用Dragula拖放我的桌子。我还使用插件角度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>
因此,需要使用* ngFor将div放置在div之前的div上。然后dragula使用每个表格列的全宽。
问题是当我想调整列的大小时,当我开始拖动右边框(因为我这样做)来调整它的大小时,它也开始拖动整列。在某些情况下,它会调整列的大小,但在大多数情况下会移动列。
我尝试过的解决方案的一部分是使dragula列更小,而不是在div中放置另一个div class="col"
,其中是angular-resizable-element,并在div上添加一些左右填充。但这部分不成功。
问题:有人可以帮助我让dragula和angular-resizable-element毫无困难地一起工作。