Как привязать элемент к мыши, чтобы изменялось ширина?

Question

[Руслан Абсалямов]

Я реализовал практически такой пример jsfiddle.net/epcybL4v/2614/, только момент такой, в моем примере https://jsfiddle.net/eywraw8t/490910/ нельзя так активно мышку двигать, она вылетает из области видимости и невозможно изменять ширину уже. Можно только медленно передвигать мышку, что не очень удобно и скорее всего как-то по другому реализовывается.
Второй момент, что я заметил, это когда допустим сужаешь расстояние, но потом захотел расширить, тебе нужно отжать мышку и заново сделать те же движение
Пока что не понял как привязать элемент к мыши, чтобы избежать всех этих нюансов

Answer 1

[Владимир Проскурин]

Вы должны слушать mousemove на весь документ, а вы слушаете только на элемент. Вот и выходит, что мышка уходит с элемента (он же маленький), и mousemove больше не вызывается. Вот пример, я повесил mousemove на таблицу

Но это все равно не то (но суть отражает). Нужно в хуке mounted вешать mousemove на весь документ, как в вашем примере. Желательно еще на beforeDestroy вешать удаление слушателя.

Comments

[Руслан Абсалямов]

Типо так сделать https://jsfiddle.net/eywraw8t/490919/ ?

[Владимир Проскурин]

Руслан Абсалямов, да, а чтобы ширина у каждого объекта была своя, выводите ее в объекты с массива columns

let columns = [
  { name: "name", label: "Name", width: '100' },
  //...
]

При клике на див запоминаем выбранную колонку, и при move меняем ширину только выбранной колонки.
Вот так