课程表拖拽 JS

_最初の心

已于 2024-05-17 09:44:28 修改

阅读量117

点赞数 1

分类专栏： web前端文章标签： javascript

于 2024-05-17 09:41:53 首次发布

本文链接：https://blog.csdn.net/qq_36405210/article/details/138994321

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表拖拽</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="header">
        <h1>课程表拖拽</h1>
    </div>
    <div id="container">
        <div class="left" data-drag="move">
            <div class="subject language" draggable="true" data-ondrag="copy">语文</div>
            <div class="subject mathematics" draggable="true" data-ondrag="copy">数学</div>
            <div class="subject english" draggable="true" data-ondrag="copy">英语</div>
            <div class="subject history" draggable="true" data-ondrag="copy">历史</div>
        </div>
        <div class="right">
            <table>
                <thead>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td colspan="7" align="center">下午</td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
                    <tr>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                        <td data-drag="copy"></td>
                    </tr>
            </table>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

2. css

/* css基础配置 */
/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header{
    text-align: center;
    padding: 20px 0;
}

#container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;

}
#container .left {
    width: 200px;
    background-color: #f0f0f0;
    padding: 10px 30px;
}
#container .right {
    width: 980px;
    background-color: #f0f0f0;
    padding: 10px;
}
#container .subject{
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    border-radius: 5px;
}
.left .subject{
    margin-bottom: 20px;
}
.right .subject{
    width: 90%;
    margin: 0 auto;
}
.language{
    background-color: red;
}
.mathematics{
    background-color: blue;
}
.english{
    background-color: rgb(0, 255, 89);
}
.history{
    background-color: rgb(255, 0, 212);
}


.right table{
    width: 100%;
}

.right table tr th{
    background-color: #a79f9f;
    padding: 10px;
    border: 1px solid #3f3b3b;
}
.right table tr td{
    height: 60px;
    border: 1px solid #3f3b3b;
}
/* 被拖到元素背景 */
#container .ondrag{
    background-color: #3f3b3b;
}

3. JS

let container = document.getElementById('container');
let current;
container.ondragstart = function(e) {
    // 鼠标加号
    e.dataTransfer.effectAllowed = e.target.dataset.ondrag;
    current = e.target;
};
container.ondragover = function(e) {
    e.preventDefault();
}
// 清空class
function clearcss() {
    let list = document.getElementsByClassName('ondrag');
    for (let i = 0; i < list.length; i++) {
        list[i].classList.remove('ondrag');
    }
}
// 查看父元素是否有拖拽属性
function parentIsDrag(node){
    while(node){
        if(node.dataset && node.dataset.drag){
            return node;
        }
        node = node.parentNode;
    }
}
// 拖拽到符合元素
container.ondragenter = function(e) {
    //是否有符合拖拽的父元素
    let isdragDom = parentIsDrag(e.target);
    if(!isdragDom){
        return;
    }
    if(current.dataset.ondrag !== isdragDom.dataset.drag){
        return;
    }
    // 清空class
    clearcss();
    // 添加class
    isdragDom.classList.add('ondrag');
}
// 拖拽结束
container.ondrop = function(e) {
    // 清空class
    clearcss();
    //是否有符合拖拽的父元素
    let isdragDom = parentIsDrag(e.target);
    if(!isdragDom){
        return;
    }
    if(current.dataset.ondrag != isdragDom.dataset.drag){
        return;
    }
    if(isdragDom.dataset.drag == 'copy'){
        //清空
        isdragDom.innerHTML = '';
        let clone = current.cloneNode(true);
        clone.dataset.ondrag = 'move';
        isdragDom.appendChild(clone);
    }else if(isdragDom.dataset.drag == 'move'){
        current.remove();
    }
        
}

效果：