Изменить размер div и перейти к следующему столбцу / div

Question

Как я могу переместить измененный размер div в следующую строку, когда изменение размера ограничено родительским div, как показано ниже (как в полноценном календаре).

Update. Этот код зависит от InteractJS (http://interactjs.io/)

interact(resizeDiv)
    .resizable({
        edges: { left: true, right: true, bottom: false, top: false },

        restrictEdges: {
          endOnly: true,
          outer: '.month'
        },

        restrictSize: {
          min: { width: 80, height: 3 },
          max: {height: 3}
        },

        inertia: true,
      })
      .on('resizemove', function (event) {
        var target = event.target,
            x = (parseFloat(target.getAttribute('data-x')) || 0),
            y = (parseFloat(target.getAttribute('data-y')) || 0);
        target.style.width  = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.style.webkitTransform = target.style.transform =
            'translate(' + x + 'px,' + y + 'px)';

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
        var onTopElement = document.elementFromPoint(event.clientX, event.clientY);

        let calendarArea = document.getElementById('calendarArea');
        console.log(event.clientY, target.offsetTop);
      })

Пример - Полный календарь:

Answer 1

Логика Fullcalendar проста: она создает новый div в следующей строке, а не использует тот же div, размер которого вы изменяете, и применяете событие resize (для fullcalendar используется событие JQuery resize) к новому div.Я думаю, что технически невозможно использовать один и тот же div (тот же элемент dom) в двух строках, которые вы пытаетесь сделать.