Как для тека td table сделать динамическое изменение ширены столбца?

Question

Galdar Turin @Galdar

Web, JS, PHP, NGINX, Linux

JavaScript

Как для тека td table сделать динамическое изменение ширены столбца?

Использую вот эту доку https://learn.javascript.ru/mouse-drag-and-drop#slayder но не могу догнать, как зажимая полоску изменять ширину столбца.

Ниже привел скрипт, у меня получается сдвиг только в одну сторону и курсор отскакивает от объекта при сдвиги, т.е. нету привязки.

При много благодарен буду если кто сможет сказать что делаю не так

IMG

html

<table>
        <tr>
            <th class="column" style="width: 300px;">

                <div class="name">
                    Название
                </div>

                <div class="border">
                    <icon 
                        (mousedown)="mousedown($event)"
                        (mouseup)="mouseup()"
                        (mousemove)="mousemove()"
                        type="solid" 
                        name="gripLinesVertical" 
                        class="fa-resize fa-color_black"
                    ></icon>
                </div>
                
            </th>
            <th>Сайт</th>
            <th>Почта</th>
        </tr>
        <!-- <tr>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td><input type="text"></td>
        </tr> -->
        <tr>
            <td>тест1</td>
            <td>тест2</td>
            <td>тест3</td>
        </tr>
    </table>

js

onMouseDown: boolean = false;
  element: any
  event: any

  th: any = document.getElementsByClassName('column');

  shiftX: number = 0;

  mousedown(event: any) {

    console.log("mousedown");
    // console.log(event.clientX, event.clientY);
    // console.log(event);
    // console.log(event.toElement.style);



    this.onMouseDown = true;

    this.element = event.toElement;
    this.event = event;
    this.event.preventDefault();

    this.shiftX = this.event.clientX - this.element.getBoundingClientRect().left;
   
    this.onMouseMove();

  }

  mouseup() {
    console.log("mouseup");
    this.onMouseDown = false;
    this.element = null
    this.event = null
  }

  mousemove() {
    console.log("mousemove");
    if( this.onMouseDown )
    {
      this.onMouseMove()
    }
      
  }

  onMouseMove() {

    let newLeft = this.event.clientX - this.shiftX - this.th[0].getBoundingClientRect().left;

    console.log("shiftX", this.shiftX);
    
    if (newLeft < 0) {
      newLeft = 0;
    }

    let rightEdge = this.th[0].offsetWidth - this.element.offsetWidth;
    

    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }

    console.log("newLeft", newLeft);

    this.th[0].style.width = newLeft + 'px';


  }