Dragula Angular мультитабли

Question

У меня есть 3 таблицы, которыми я хочу манипулировать. Первая таблица является наиболее важной: содержит общий выбор пользователя. пример:

Назовите возраст

Вторая таблица под названием "Биология" (пустая в начале) должна быть заполнена элементами таблицы 1.

Третья таблица, называемая химией, также может быть заполнена элементами таблицы 1.

Ряд правил применим к Таблице 2 и 3, например, минимальное количество студентов, которое должно быть 1, и максимальное количество.

Я использую Dragula для угловых, и это то, что я сделал:

<div class='wrapper'>
     <div class='container' *ngFor='let offer of rules[offer]' [dragula]='"nested-bag"' [dragulaOptions]="dOptions">
     <span>{{offer.category}}</span>
     <div *ngFor='let element of offer.elements'>{{element}}</div>
</div>

Правила устанавливаются в следующей форме:

rules: any = {
        college: [
            {
                category: "Biology",
                required: true,
                elements: [],
                min: 1,
                max: 3
            },
            {
                category: "Chemisty",
                required: true,
                elements: [],
                min: 1,
                max: 4
            }
        ]
    };

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

Я хочу, чтобы CSS контейнера динамически изменялся в соответствии с тем, соответствуют ли элементы, перетаскиваемые в него, правилам или нет.

при использовании Dragula, при попытке перетащить строку таблицы 1, только столбец выбран и перетаскивается, а не весь необработанный. Также tje offer.category(название курса) перетаскивается, но я не хочу, чтобы оно было перетаскиваемым. Я новичок в угловой, я был бы рад, если есть какая-либо помощь.