Why is the data from my html table not in the form values on a post?

Question

I have a page/view that builds a table from a model passed in. I'm using html5 drag and drop features to allow the user to move items from one table cell to another. When I submit the form none of the data in my table is posted back to the server. The table is inside the form tag. Shouldn't the table data be sent back to the server?

The code for my view is

    @model the19thTee.Core.ScheduleWeek

@{
    ViewBag.Title = string.Format("Edit Schedule Week# {0} | The 19th Tee", Model.WeekNumber);
    Layout = "~/Views/Shared/_the19thTeeLayout.cshtml";
}
<link href="~/styles/edit-schedule.css" rel="stylesheet" />

<h2>Edit Schedule Week - Week# @Model.WeekNumber - @Model.Date.ToShortDateString()</h2>

@using (@Html.BeginForm())
{
    <p>Drag and drop foursomes and teams/players in the box below as a temporary holding area.</p>
    <div id="holding-container" ondrop="drop(event)" ondragover="handleDragOver(event)"></div>
    <div class="schedule_container">
        <table class="schedule_table">
            <tbody>
                <tr>
                    <th colspan="2" class="schedule_table_header_cell">Date</th>
                    @foreach (var @foursome in @Model.Foursomes)
                    {
                        <th class="schedule_table_header_cell">@foursome.TeeTime.Time</th>
                    }
                </tr>
                <tr>
                    <td>@Model.WeekNumber</td>
                    <td>@Model.Date.ToShortDateString()</td>

                    @foreach (var @foursome in @Model.Foursomes)
                    {
                        <td class="foursome-cell">
                            <div class="foursome-container" ondrop="drop(event)" ondragover="handleDragOver(event)" ondragestart="drag(event)">

                                    <div id="@string.Format("foursome{0}", @foursome.PositionIndex)" class="foursome" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="handleDragOver(event)">
                                        <p>Move the whole foursome</p>
                                        <div class="players-container" ondrop="drop(event)" ondragover="handleDragOver(event)">
                                            <p>Drag and drop individual players from/to here</p>
                                            @foreach (var @team in @foursome.Teams)
                                            {
                                                <div id="@string.Format("team{0}", @team.TeamNumber)" class="team-container" draggable="true" ondragstart="drag(event)">@team.TeamName</div>
                                            }
                                        </div>
                                </div>
                            </div>
                        </td>
                    }
                </tr>
            </tbody>
        </table>
    </div>
    <div id="save-cancel-container"><input type="submit" class="btn btn-primary" id="submit-button" name="submit-button" value="Save" /><a href="/admin/edit-schedule" class="btn btn-cancel">Cancel</a></div>
}
<script>
    function handleDragStart(e) {
        this.style.opacity = '0.4';  // this / e.target is the source node.
        this.style.add("dragging");
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault(); // Necessary. Allows us to drop.
        }

        e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

        return false;
    }

    function handleDragEnter(e) {
        // this / e.target is the current hover target.
        this.classList.add('over');
    }

    function handleDragLeave(e) {
        this.classList.remove('over');  // this / e.target is previous target element.
    }

    function handleDrop(e) {
        e.preventDefault();
        // this / e.target is current target element.

        if (e.stopPropagation) {
            e.stopPropagation(); // stops the browser from redirecting.
        }

        // See the section on the DataTransfer object.
        var data = e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById(data));

        return false;
    }

    function handleDragEnd(e) {
        // this/e.target is the source node.

        //[].forEach.call(containers, function (container) {
        //  container.classList.remove('over');
        //});

        e.target.classList.remove("dragging");
    }

    //var containers = document.querySelectorAll('#foursome-container, #player-container');
    //[].forEach.call(containers, function (container) {
    //  container.addEventListener('dragstart', handleDragStart, false);
    //  container.addEventListener('dragenter', handleDragEnter, false)
    //  container.addEventListener('dragover', handleDragOver, false);
    //  container.addEventListener('dragleave', handleDragLeave, false);
    //  container.addEventListener('drop', handleDrop, false);
    //  container.addEventListener('dragend', handleDragEnd, false);
    //});

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        console.log("target.id = " + ev.target.id);

        ev.target.classList.add("dragging");

        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();

        var data = ev.dataTransfer.getData("text");

        console.log("data = " + data);

        var isTeam = data.startsWith("team");

        console.log("isTeam = " + isTeam);

        var el = document.getElementById(data);

        console.log(el);

        console.log("drop target = " + ev.target.id);

        if ((isTeam && ev.target.className == "players-container") || (!isTeam && ev.target.className == "foursome-container") || ev.target.id == "holding-container"){

            ev.target.appendChild(el);

            el.style.opacity = 1.0;

            el.classList.remove("dragging");

            console.log("clearing data");

            ev.dataTransfer.clearData();
        }
    }
</script>