KanbanBoardWebPart02.ts

// ....
export const LAYOUT_MAX_COLUMNS = 12;

export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {

  // ....

  public render(): void {
    this._renderBoard();
  }

  private _getColumnSizeClassName(columnsCount: number): string {
    if (columnsCount < 1) {
      console.log("Invalid number of columns");
      return "";
    }

    if (columnsCount > LAYOUT_MAX_COLUMNS) {
      console.log("Too many columns for responsive UI");
      return "";
    }

    let columnSize = Math.floor(LAYOUT_MAX_COLUMNS / columnsCount);

    console.log("Column size =" + columnSize);
    return "ms-u-sm" + (columnSize || 1);
  }

 /**
   * Generates and inject the HTML of the Kanban Board
   */
  private _renderBoard(): void {
    let columnSizeClass = this._getColumnSizeClassName(this.statuses.length);

    // The begininning of the WebPart
    let html = `
      <div class="${styles.kanbanBoard}">
        <div class="${styles.container}">
          <div class="ms-Grid-row ${styles.row}">`;

    // For each status
    this.statuses.forEach(status => {
      // Append a new Office UI Fabric column with the appropriate width to the row
      html += `<div class="${styles.kanbanColumn} ms-Grid-col ${columnSizeClass}" data-status="${status}">
                  <h3 class="ms-fontColor-themePrimary">${status}</h3>`;
      // Get all the tasks in the current status
      let currentGroupTasks = this.tasks.filter(t => t.Status == status);
      // Add a new tile for each task in the current column
      currentGroupTasks.forEach(task => {
        html += `<div class="${styles.task}" data-taskid="${task.Id}">
                        <div class="ms-fontSize-xl">${task.Title}</div>
                      </div>`;
      });
      // Close the column element
      html += `</div>`;
    });

    // Ends the WebPart HTML
    html += `</div>
        </div>
      </div>`;

    // Apply the generated HTML to the WebPart DOM element
    this.domElement.innerHTML = html;

    console.log("Kanban columns found : " + $(".kanban-column").length);
   // Make the kanbanColumn elements droppable areas
    let webpart = this;
    $(`.${styles.kanbanColumn}`).droppable({
      tolerance: "intersect",
      accept: `.${styles.task}`,
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: (event, ui) => {
        // Here the code to execute whenever an element is dropped into a column
        let taskItem = $(ui.draggable);
        let source = taskItem.parent();
        let previousStatus = source.data("status");
        let taskId = taskItem.data("taskid");
        let target = $(event.target);
        let newStatus = target.data("status");
        taskItem.appendTo(target);

        // If the status has changed, apply the changes
        if (previousStatus != newStatus) {
          webpart.changeTaskStatus(taskId, newStatus);
        }
      }
    });

    console.log("Task items found : " + $(".task").length);
    // Make the task items draggable
    $(`.${styles.task}`).draggable({
      classes: {
        "ui-draggable-dragging": styles.dragging
      },
      opacity: 0.7,
      helper: "clone",
      cursor: "move",
      revert: "invalid"
    });
  }

  private changeTaskStatus(taskId: number, newGroup: string) {
    console.log(`Task ${taskId} moved to group ${newGroup}`);
  }

  // ....
}