拖动把手的实现方案

方案

通过动态的改变水平两个div宽度，来实现两个div宽度的增长与缩短

具体实施：

html:

1、 拖动把手是基于父元素进行定位的

   <div #divleft style="position: relative;"
       
        <!--拖动把手开始-->
        <div #拖动把手那条线 (mousedown)="lineMouseDown($event)">
          <div  (mousedown)="lineMouseDown($event)">
          </div>
        </div>
        <!--拖动把手结束-->
    </div>

    <div #divright></div>

js:

1、mousedown的时候，记录下元素的初始宽度：offsetwidth, pageX

      // offsetWidth: 元素自身的宽度      // pageX: 鼠标指针距离当前网页最左侧的距离(包含滚动条的距离)      this.originWidth = element.offsetWidth;      this.startX = event.pageX;      this.addListener();

2、注册mouseMove 与mouseup事件：

      window.document.addEventListener('mousemove', this.bindedMouseMoveFunc);      window.document.addEventListener('mouseup', this.bindedMouseUpFunc);

3、mouseMove核心逻辑：

      记录下结束的pageX的位置：

      核心代码：this.originWidth + this.endX - this.startX

       其实就是原始的width宽度，加上或减去endx与startx的差值 

      this.endX = event.pageX;      if (this.endX !== this.startX) {        let delta = Math.max(this.originWidth + this.endX - this.startX, this.minWidth);        this.picklistRightContent.nativeElement.style['min-width'] = '150px';        this.picklistLeftContent.nativeElement.style['width'] = delta + 'px';        this.picklistRightContent.nativeElement.style['width'] = 'calc(100% - ' + delta + 'px)';      }

4、mouseup事件remove掉刚才注册的事件

css: 

梯形的实现：div做与透明的，然后设置左边框或者右边框

    position: absolute;    cursor: pointer;    height: 55px;    width: 0;    border-left-width: 6px;    border-left-style: solid;    border-bottom: 5px solid transparent;    border-top: 5px solid transparent;    border-top-right-radius: 8px;    border-bottom-right-radius: 8px;