Javascript 如何区分鼠标&x201C；单击”；和“；拖动&x201D；角度4中的div表列？

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

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

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

我不清楚的部分是这个的主要逻辑，也就是说：

单击并拖动列右边框时

然后应该应用一些css样式并更新列的宽度

mousemove，这需要什么活动

代码：

以下是表格的样式：

@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;
    }
  }
}*

---

@是的，我没有尝试使用flex flow。但对于这个表格，网格是使用flex的。我用表格的css文件更新帖子。你的意思是我应该将display:flexbox和flexflow:row wrap添加到column类中？确实，你使用flexbox，但是，你能制作一个JSfiddle，或者一个你想要实现的示例吗？@Random ok我会的。谢谢是一个允许调整列大小的角度表。但我想这太难解释了，如果你能提出一个更具体的问题会更好。@sabithpocker谢谢你和我分享这个资源。确定为该问题创建stackblitz代码示例。

@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();
    }
}

.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;
    }
  }
}*