JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable Event Scheduler</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <div class="column" id="events">
            <div class="column-header">Events</div>
            <ul class="sortable-list">
                <li class="event welcome-event" data-duration="00:15:00">
                    <div class="event-title">Welcome</div>
                    <div class="event-start-time"></div>
                    <div class="event-duration">Duration: 00:15:00</div>
                    <div class="event-end-time"></div>
                </li>
                <li class="event lead-in-event leadin-event" id="leadIn" data-duration="00:01:00" data-event-type="">
                    <div class="event-title">LeadIn</div>
                    <div class="event-start-time" style="display: none;"></div>
                    <div class="event-duration" style="display: none;">Duration: 00:01:00</div>
                    <div class="event-end-time" style="display: none;"></div>
                </li>
                <li class="event" data-duration="00:05:10">
                    <div class="event-title">Film 1</div>
                    <div class="event-start-time"></div>
                    <div...

CSS

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.column {
    width: calc(16.666% - 10px); /* Equal width for 6 columns with 10px gap */
    border: 1px solid #ddd;
    padding: 10px;
}

.column-header {
    font-weight: bold;
    margin-bottom: 10px;
}

.sortable-list {
    list-style: none;
    padding: 0;
    min-height: 50px;
}

.event {
    background-color: #3498db;
    color: white;
    padding: 5px;
    margin: 5px 0;
    cursor: pointer;
}

.leadin-event {
	background-color: #ffaf49;
}

.welcome-event {
	background-color: #41c300;
}

.event-duration, .event-start-time, .event-end-time {
	font-size: 12px;
}

.event-placeholder {
    background-color: #ddd;
    height: 20px;
    margin: 5px 0;
}

.event-title {
	font-weight: bold;
}

.total-duration {
    color: #666;
    font-size: 12px;
}

JavaScript

$(document).ready(function () {
    // Call the sort function on page load to alphabetize the Events column
    sortEventsInEventsColumn();

    $(function() {
        $(".sortable-list").sortable({
            connectWith: ".sortable-list",
            placeholder: "event-placeholder",
            receive: function (event, ui) {
                var $targetColumn = $(this).closest(".column");

                if ($targetColumn.attr("id") !== "events") {
                    // Recalculate start and end times for the entire column
                    recalculateColumnTimes($targetColumn);

                    // Update total duration for the target column
                    updateTotalDuration($targetColumn);
                } else {
                    // Clear start and end times for the dragged event item
                    updateEventTimes(ui.item, "", "");
                }

                // Sort events in the Events column
                sortEventsInEventsColumn();
            },
            update: function (event, ui) {
                var $targetColumn = $(this).closest(".column");

                if ($targetColumn.attr("id") !== "events") {
                    // Recalculate start and end times for the entire column
                    recalculateColumnTimes($targetColumn);

                    // Update total duration for the target column
                    updateTotalDuration($targetColumn);
                } else {
                    // Clear start and end times for the moved event item
                    updateEventTimes(ui.item, "", "");
                }

                // Sort events in the Events column
                sortEventsInEventsColumn();
            },
            remove: function (event, ui) {
                var $sourceColumn = $(this).closest(".column");
                if ($sourceColumn.attr("id") !== "events") {
                    // Recalculate start and end times for the entire column
                   ...