Изменение высоты DIV мышкой [на VUE.JS ]

156
03 июля 2019, 17:10

Есть 2 раздела: верхний и нижний, которые содержат подразделы,которые содеражат еще свои разделы,которые в внутри содержат элементы таблицы.

Так вот. Вернемся к первым 2м разделам - верхнее и нижнее. Нужно сделать так, чтобы пользователь мог мышкой - перетаскиванием - менять ее высоту, у меня как-то не стабильно получается)) видимо, я какие-то хуки пропускаю ..

Состряпал урезанный кривой прототипчик - https://codepen.io/kostia7alania/pen/JwNZzw

Отсюда самое главное:

mousedown_handler(e) {
  console.log("mousedown_handler=>", e);
  window.m_pos = e.y;
  window.BORDER_SIZE = 33; //ширина нашего перетаскиваемого бордюра;
  if(e.offsetY < BORDER_SIZE) this.mousedown = true;
},
mousemove_handler(e) {
  console.log("e.offsetY", e.offsetY);
  if (e.offsetY > window.BORDER_SIZE) this.mousedown = false;
  if (this.mousedown) {
    console.log("mouseMOVE", e);
    console.log("offsetHeight", e.target.offsetHeight);
    console.log("offsetY", e.offsetY);
    //e.target.offsetHeight = e.offsetY;
    window.e = e;
    document.querySelector(".drag-from").style.minHeight =
      window.screen.height - e.clientY - 90 + "px";
    if (!("m_pos" in window)) window.m_pos = "";
    const dy = window.m_pos - e.y;
    window.m_pos = e.y;
    var panel = document.querySelector('.drag-from')
    panel.style.height = (parseInt(getComputedStyle(panel, '').height)+dy) + "px"
  }
},
mouseup_handler(e) {
  this.mousedown = 0;
  console.log("mouseUP", e);
},

Репозиторий: https://github.com/kostia7alania/vue-shipregs

Задавал вчера вопрос в группе ВЬЮ в вк https://vk.com/wall-95810781_8911 - никто не ответил.

=> задавл в телегу с "коммюнити" вью с 4к участниками и НИКТО (!) не ответил.

И еще вопрос: почему ДОМ не обновляется, когда скрываю подразделы? Если я внизу списка и жму СТИК-хедер,который скрывает весь раздел, то ДОМ НЕ подымается вверх, а остается внизу и получаю просто белый экран,вместо списка разделов уровня повыше. Помогает переключение оверфлоу в инхерит, а после обновление дома (nextTick) -обратно в авто.

p.s. DEMO:

READ ALSO
Глобальные переменные webpack

Глобальные переменные webpack

Структура js файла

162
Вызов jQuery плагина без привязки к элементу

Вызов jQuery плагина без привязки к элементу

Пишу плагин на jQueryПример вызова плагина:

143
сортировка чекбоксов по нажатию кнопки jQuery

сортировка чекбоксов по нажатию кнопки jQuery

Есть кнопка по нажатию которой checked чекбоксы должны быть вверху спискаВ моем коде сортируются только чекбоксы ,а не сами "задачи"

148
Как добавить полифилл?

Как добавить полифилл?

Имеется следующий код

193