课表，拖拽

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th {
            border: 1px solid #000;
            width: 100px;
            height: 50px;
            text-align: center;
        }

        td {
            border: 1px solid #000;
            width: 100px;
            height: 50px;
            text-align: center;
        }

        .container {
            display: flex;
        }

        .left {
            width: 120px;
            border: 1px solid #000;
            overflow: auto;
        }

        .item {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #000;
            margin: 10px;
        }

        .hover {
            background: #ccc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left" data-drop="move">
        <div data-effect="copy" draggable="true" class="item" style="background: blue">语文</div>
        <div data-effect="copy" draggable="true" class="item" style="background: green">英语</div>
        <div data-effect="copy" draggable="true" class="item" style="background: red">数学</div>
        <div data-effect="copy" draggable="true" class="item" style="background: yellowgreen">科学</div>
        <div data-effect="copy" draggable="true" class="item" style="background: teal">物理</div>
        <div data-effect="copy" draggable="true" class="item" style="background: blueviolet">化学</div>
        <div data-effect="copy" draggable="true" class="item" style="background: aqua">食物</div>
        <div data-effect="copy" draggable="true" class="item" style="background: saddlebrown">美食</div>
        <div data-effect="copy" draggable="true" class="item" style="background: hotpink">足球</div>
    </div>
    <div class="right">
        <table>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
            <tr>
                <td rowspan="2">早自习</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td rowspan="4">下午</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td rowspan="2">晚自习</td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
            <tr>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
                <td data-drop="copy"></td>
            </tr>
        </table>
    </div>
</div>
<script>
    const container = document.querySelector('.container');
    let sourceNode = null;
    function getDropNode(node) {
        while (node) {
            if (node?.dataset?.drop) {
                return node;
            }
            node = node?.parentNode;
        }
    }
    function clearDropStyle() {
        const dropNodes = document.querySelectorAll('[data-drop]');
        dropNodes.forEach(node => {
            node.classList.remove('hover');
        })
    }
    container.addEventListener('dragstart', function (e) {
        e.dataTransfer.effectAllowed = e.target.dataset.effect;
        sourceNode = e.target;
    })
    container.addEventListener('dragover', function (e) {
        e.preventDefault();
    });
    container.addEventListener('dragenter', function (e) {
        clearDropStyle();
        const dropNode = getDropNode(e.target);
        if (!dropNode) return;
        if (e.dataTransfer.effectAllowed === dropNode.dataset.drop) {
            dropNode.classList.add('hover');
        }
    })
    container.addEventListener('drop', function (e) {
        clearDropStyle();
        const dropNode = getDropNode(e.target);
        if (!dropNode) return;
        if (e.dataTransfer.effectAllowed != dropNode.dataset.drop) return;
        if (e.dataTransfer.effectAllowed === 'copy') {
            dropNode.innerHTML = ''
            const clone = sourceNode.cloneNode(true);
            clone.dataset.effect = 'move';
            dropNode.appendChild(clone);
        } else {
            sourceNode.remove();
        }
    })
</script>
</body>
</html>