如何在angular 4中区分鼠标点击和拖动div表列?

我需要做一个调整列大小的逻辑。此表是自定义的,带有div和span元素。

这意味着构建这个表只需要使用纯html和SCS(而不是一些外部库)。

现在我应该让这些列可以垂直调整大小。我需要了解如何调整这个逻辑。

我不清楚的是,这其中的主要逻辑是:

1. 单击并拖动列右边框时
2. 那么应该应用一些css样式并更新列的宽度吗?
3. mousemove需要什么活动?

代码:

<div class="nano-table-row nano-table-grid-header"> 
   <!-- This columns should be resizeable -->
    <div 
        class="{{column.columnClass}}"
         *ngFor="let column of columnsArray"
         [ngClass]="{'sort-active':sortField === column.columnField}"
         (click)="onSortFieldChange(column.columnField)">
        <span>
            {{column.columnName}}
        </span>
        <i class="fa"
           [class.fa-sort-asc]="sortInverse === true && sortField === column.columnField"
           [class.fa-sort-desc]="sortInverse === false && sortField === column.columnField">
        </i>
    </div>
</div>

在这个项目中,我还发现了一些自定义的上下调整指令,也许这会有用?

@Directive({
    selector: '[nanoResizable]'
})
export class ResizableDirective implements OnInit, OnDestroy {

    @Input() elementStyle: ModalStyle;

    private mouseDown: Subject<any> = new Subject();
    private mouseDrag: any;
    private mouseMove: Subject<any> = new Subject();
    private mouseUp: Subject<any> = new Subject();

    constructor() {
        this.mouseDrag = this.mouseDown
            .flatMap(
                startPos => this.mouseMove
                    .map((pos) => ({
                        width: pos.clientX - this.elementStyle.left,
                        height: pos.clientY - this.elementStyle.top
                    }))
                    .takeUntil(this.mouseUp)
            );

    }

    @HostListener('document:mouseup', ['$event'])
    onMouseup(event) {
        this.mouseUp.next(event);
    }

    @HostListener('mousedown', ['$event'])
    onMousedown(event) {
        this.mouseDown.next(event);
        return false; // Call preventDefault() on the event
    }

    @HostListener('document:mousemove', ['$event'])
    onMousemove(event) {
        this.mouseMove.next(event);
    }

    public ngOnInit() {
        this.mouseDrag
            .subscribe({
                next: pos => {
                    this.elementStyle.height = pos.height;
                    this.elementStyle.width = pos.width;
                }
            });
    }

    public ngOnDestroy() {
        this.mouseDrag.unsubscribe();
    }
}

可调整大小的Directive的Css代码:

.nano-resize {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0;
    width: 7px;
    height: 10px;
    cursor: nwse-resize;
    z-index: 1;
   i {
     transform: rotate(-45deg);
     margin: auto;
   }
}

以下是桌子的风格:

@import "../base/colors";

.nano-table-grid {
  //flex: 1;
  .nano-table-grid-header {
    > div {
      border-bottom: 1px solid $nano-dark-grey;
      //padding: 0 5px;
      cursor: pointer;
      font-family: inherit !important;
      i {
        margin: auto 0 auto 2px;
      }
      &.sort-active {
        background-color: rgba(141, 192, 219, .25);
      }
    }
  }
  .nano-table-row-wrapper {
    border-bottom: 1px solid #e0e0e0;
  }
  .nano-table-row {
    display: flex;
    padding: 5px 0;
    flex-wrap: wrap;
    border: 1px solid transparent;
    > div {
      flex: 1;
      display: flex; 
      overflow: hidden;
      margin: 0 2px;
      > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .nano-table-placement-name-cell {
      flex: 2;
      flex-direction: column;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }

    .nano-table-entity-name-cell {
      flex: 3;
      flex-direction: column;

      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-name-cell {
      font-family: monospace;
      flex: 3;
      span {
        margin: auto 0;
      }
    }
    .nano-table-text-cell {
      font-family: monospace;
      flex: 2;
      span {
        margin: auto 0;
      }
    }
    .nano-table-placement-name-cell {
      min-width: 270px;
      span {
        margin: auto 0;
      }
    }
    .nano-table-number-cell {
      font-family: monospace;
      span {
        margin: auto 5px auto auto;
      }
    }
    .nano-table-actions-cell {
      min-width: 90px;
      flex: 2;
      justify-content: center;
      > span {
        padding: 5px;
      }
    }
    .nano-table-shrink-cell {
      flex: 0 0 50px;
      justify-content: center;
      align-items: center;
    }
    .nano-table-expanded-cell {
      flex: 3;
    }
    .nano-table-preview-cell {
      height: 500px;
      flex: 0 0 100%;
      margin-top: 7px;
      margin-bottom: -5px;
      flex-direction: column-reverse;
      position: relative;
      .nano-entity-comment {
        height: calc(100% - 50px);
      }
      .nano-entity-header {
        display: none;
      }
    }
    &.opened {
      border: 1px solid $nano-white-smoke-darken;
    }
    &:nth-child(even) {
      background-color: #fdfdfd;
    }
  }
}

.nano-table-footer {
  flex: 0 0 50px;
  display: flex;
  .pagination-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
  }
  .page-count-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }
  .pagination-item, .page-count-item {
    flex: 0 0 30px;
    padding: 5px;
    display: flex;
    background-color: #f6f6f6;
    margin: 10px 2px;
    border: none;
    span {
      margin: auto;
    }
    &.pagination-item-active, &:hover, &:disabled {
      background-color: #e0e0e0;
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
}*