Изменение размера столбцов начальной загрузки путем их перетаскивания

Question

У моего углового приложения есть контейнер, и я генерирую динамические столбцы (через динамические компоненты), у этих столбцов есть классы начальной загрузки. Мои столбцы могут быть до 6 макс. И 1 мин. При изменении количества столбцов от 1-> 6 или 6-> 1,6-> 3 и т. Д. Я обновляю все классы динамических столбцов, поэтому общая сумма всегда равна 12.

Мне необходимо изменить размер этих столбцов, перетаскивая их из одной стороны, и обновить классы соседних столбцов, чтобы общее количество никогда не превышало 12. Я искал довольно мало вещей, таких как перетаскивание jQuery-ui и другие скрипты, но они также не получили никакого хорошего подхода. очень в JQuery или нет.

Любая помощь будет высоко оценена в форме предложения, ссылки на код, статьи или в любом направлении.

PS: я сталкивался с этим, например. codepen для изменения размера начальной загрузки , но это очень jQuery, и я смотрю что-то похожее в угловых 5.

<div class="container">
    <div class="grid">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
            <div class="col-xs-3"></div>
        </div>
    </div>
</div>

Это еще один пример, с которым я столкнулся: он просто обновляет соседние столбцы при перетаскивании, например. если 3 столбца [3,4,5], поэтому при перетаскивании первого столбца он достигнет максимального значения [6,1,5], т.е. он не пойдет дальше, переходя к 3-му столбцу [7,1,4]

и мои столбцы контейнера выглядят как

Answer 1

Я отвечаю на этот вопрос, потому что я только что получил работу, близкую к тому, чего я хочу достичь, и помогаю кому-то в чем-то, но все же это точное решение примера, которому я следую.

Эта скрипка дала мне общее представление о том, как этого достичь. Таким образом, я рассчитал ось X мыши для события mousedown для элемента и события mouseup для документа, где я получаю конечную ось X, затем вычисляю направление (влево или вправо) и обновляю соответствующую пару классов начальной загрузки. например имея 3 столбца [3,4,5], поэтому, перетаскивая первый столбец в правильном направлении, я тоже обновляю его [4,3,5]

Но это все еще отстает от гладкости или привязки (после того, как определенная ось X покрыта, затем обновляет столбец)