前端原生js實現(xiàn)拖拽排課效果實例

更新時間：2025年02月20日 09:30:56 作者：借來一夜星光

這篇文章主要介紹了如何實現(xiàn)一個簡單的課程表拖拽功能,通過HTML、CSS和JavaScript的配合,我們實現(xiàn)了課程項的拖拽、放置和顯示功能,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 效果展示

如圖所示，頁面左側(cè)有一個包含不同課程（如語文、數(shù)學(xué)等）的列表，頁面右側(cè)是一個表格，表示一周內(nèi)每天的不同時間段。用戶可以通過拖拽左側(cè)的課程到右側(cè)的時間表中，來安排課程。

2. 效果分析

目標(biāo)：鼠標(biāo)摁下左側(cè)某一科目，拖拽到右側(cè)某一位置放下，拖拽的課程就會嵌入到課表框當(dāng)中

2.1 關(guān)鍵點

(1) 拖拽與放置邏輯的實現(xiàn)

(2) HTML與CSS布局的設(shè)計

2.2 實現(xiàn)方法

(1) 將拖拽過程分為開始拖拽、允許放置、放置三部分分析。

(2) 頁面主要由兩部分組成——左側(cè)是可拖動的課程項列表，右側(cè)是一個表格，用于顯示每周的時間安排。每個課程項都設(shè)定了 draggable = "true" 屬性，使其可以被拖動。表格中的 <td> 元素（不包括第一列）是可以放置課程的目標(biāo)區(qū)域。

(3) 通過 CSS 確保頁面居中顯示，并設(shè)置了 .box 容器的尺寸和邊框。.left 和 .right 分別代表課程項列表和時間表的位置和大小。

3. 代碼實現(xiàn)

接下來我會一步一步解說每段關(guān)鍵代碼的含義。

3.1 html部分

  <div class="box">
        <div class="left">
            <div class="yu" draggable="true">語文</div>
            <div class="shu" draggable="true">數(shù)學(xué)</div>
            <div class="ying" draggable="true">英語</div>
            <div class="wu" draggable="true">物理</div>
            <div class="hua" draggable="true">化學(xué)</div>
            <div class="sheng" draggable="true">生物</div>
        </div>

        <div class="right">
            <table>
                <tr>
                    <th>時間/星期</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
                <tr>
                    <td>08:00-09:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>10:00-11:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>11:00-12:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>12:00-13:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>14:00-15:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>15:00-16:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>

左側(cè)是課程列表，該部分包含六個 <div> 元素，每個元素代表一門課程（如語文、數(shù)學(xué)等），并賦予了 draggable = "true" 屬性，這意味著這些課程項可以被拖動。

右側(cè)是時間表，提供了五個工作日（周一至周五）和六個上課時段的時間框架，使得用戶可以直觀地安排每周的課程。

3.2 css部分

 .left {
            width: 150px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: .7rem;
        }
        .left > div {
            width: 100%;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            letter-spacing: 4px;
            cursor: move;
        }
        .yu { background: lawngreen; }
        .shu { background: skyblue; }
        .ying { background: mediumslateblue; }
        .wu { background: aqua; }
        .hua { background: violet; }
        .sheng { background: navajowhite; }

        .right {
            width: 750px;
            height: 400px;
            overflow: auto;
        }

css部分沒什么好說的，按照自己的喜好隨意編寫即可。

3.3 js部分

const draggables = document.querySelectorAll('.left > div');
const droppables = document.querySelectorAll('.right td:not(:first-child)');

獲取所有可拖動的課程項和所有可放置課程的時間段單元格（不包括第一列）。

draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', e => {
                e.dataTransfer.setData('text/plain', e.target.className);
                e.dataTransfer.dropEffect = 'move';
            });
        });

拖拽開始:：當(dāng)用戶開始拖動一個課程項時，瀏覽器觸發(fā) dragstart 事件。在這個事件處理函數(shù)中，我們使用 setData 方法將被拖拽元素的類名作為數(shù)據(jù)存儲在 Datatransfer 對象中。同時，設(shè)置drapEffect 屬性為 ‘move’，以表明這是一個移動操作。

droppables.forEach(droppable => {
    droppable.addEventListener('dragover', e => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    });
});

允許放置： 當(dāng)拖拽元素經(jīng)過目標(biāo)單元格時，瀏覽器會觸發(fā) dragover 事件。默認(rèn)情況下，瀏覽器會阻止這個事件，所以我們需要調(diào)用 preventDefault() 來允許放置。同樣地，我們設(shè)置 dropEffect為 ‘move’，以便與 dragstart 中的設(shè)置相匹配。

droppable.addEventListener('drop', e => {
    e.preventDefault();
    const draggedItemClass = e.dataTransfer.getData('text/plain');
    const draggedItem = document.querySelector(`.${draggedItemClass}`);

    if (e.target.tagName === 'TD') {
        e.target.textContent = draggedItem.textContent;
        e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
    }
});

放置：當(dāng)用戶釋放鼠標(biāo)按鈕，拖拽元素被放置到目標(biāo)單元格時，瀏覽器觸發(fā) drap 事件。在這個事件處理函數(shù)中，我們獲取之前存儲的數(shù)據(jù)（即課程項的類名），找到對應(yīng)的課程項，并將其內(nèi)容和背景顏色復(fù)制到目標(biāo)單元格中。

3.4 完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽實現(xiàn)排課</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .box {
            width: 1000px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .left {
            width: 150px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: .7rem;
        }
        .left > div {
            width: 100%;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            letter-spacing: 4px;
            cursor: move;
        }
        .yu { background: lawngreen; }
        .shu { background: skyblue; }
        .ying { background: mediumslateblue; }
        .wu { background: aqua; }
        .hua { background: violet; }
        .sheng { background: navajowhite; }

        .right {
            width: 750px;
            height: 400px;
            overflow: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            width: 120px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
        }
        td {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="yu" draggable="true">語文</div>
            <div class="shu" draggable="true">數(shù)學(xué)</div>
            <div class="ying" draggable="true">英語</div>
            <div class="wu" draggable="true">物理</div>
            <div class="hua" draggable="true">化學(xué)</div>
            <div class="sheng" draggable="true">生物</div>
        </div>

        <div class="right">
            <table>
                <tr>
                    <th>時間/星期</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
                <tr>
                    <td>08:00-09:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>10:00-11:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>11:00-12:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>12:00-13:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>14:00-15:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>15:00-16:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        // 獲取所有可拖動的課程項
        const draggables = document.querySelectorAll('.left > div');
        // 獲取所有可放置課程的時間段單元格（不包括第一列）
        const droppables = document.querySelectorAll('.right td:not(:first-child)');

        // 添加拖拽開始事件監(jiān)聽器
        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', e => {
                e.dataTransfer.setData('text/plain', e.target.className);
                e.dataTransfer.dropEffect = 'move';
            });
        });

        // 添加拖拽進(jìn)入和放置事件監(jiān)聽器
        droppables.forEach(droppable => {
            droppable.addEventListener('dragover', e => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            });

            droppable.addEventListener('drop', e => {
                e.preventDefault();
                const draggedItemClass = e.dataTransfer.getData('text/plain');
                const draggedItem = document.querySelector(`.${draggedItemClass}`);

                if (e.target.tagName === 'TD') {
                    e.target.textContent = draggedItem.textContent;
                    e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;
                }
            });
        });
    </script>
</body>
</html>