Событие ресайза для div?

203
10 января 2018, 16:13

Чистый JavaScript. Для <div> устанавливаю в CSS resize: both; Всё работает. Но!
Надо отловить событие на окончание этого ресайза. Как?
Пока обхожусь событием mouseup, но если ли не делать ресайза, то оно тоже отрабатывает, а этого не надо.

Answer 1

Алгоритм такой:

  1. Отлавливаем mousedown на div, замеряем текущие размеры;
  2. Отлавливаем mouseup и, если размеры изменились, то это событие и есть искомое.

Как вариант:

function watch(element) { 
  var w = element.clientWidth; 
  var h = element.clientHeight; 
  element.innerHTML = ''; 
  element.addEventListener('mouseup', check); 
 
  function check() { 
    if (w === element.clientWidth && h === element.clientHeight) return; 
    element.removeEventListener('mouseup', check); 
    element.innerHTML = 'resized'; 
    // add your code here 
  } 
}
div { 
  background: yellow; 
  height: 100px; 
  overflow: auto; 
  resize: both; 
  width: 100px; 
}
<div onmousedown="watch(this)"></div>

READ ALSO
Как восстановить непрерывную последовательность первичного ключа в MySQL?

Как восстановить непрерывную последовательность первичного ключа в MySQL?

Первичным ключом в таблице является целое число с опцией auto_incrementЯ удалил запись в таблице с id(первичным ключом) 4

188
Как писать юнит-тесты для скриптов которые работают с базами данных?

Как писать юнит-тесты для скриптов которые работают с базами данных?

Добрый день, подскажите пожалуйста какие существуют подходы если нужно протестировать части веб-приложения которые работают с базой данных...

242
Сортировка в нужном порядке

Сортировка в нужном порядке

Требуется создать свой порядок сортировки вида: 1,2,3,null,null,null,nullПробовал создать дополнительное поле, и пронумеровать нужное

185