拖拽API实现课程表编辑

原创已于 2024-04-10 16:06:47 修改 · 560 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

于 2024-04-10 16:03:33 首次发布

博客涉及前端领域，重点围绕JavaScript和CSS展开，但具体内容缺失。这两种技术是前端开发的重要组成部分，JavaScript用于实现交互效果，CSS用于页面样式设计。

在这里插入图片描述

<div class="container">
        <div class="options" data-drop="move">
            <div class="item" data-effect="copy" draggable="true" >语文</div>
            <div class="item" data-effect="copy" draggable="true" style="background: rgb(219, 66, 66);">数学</div>
            <div class="item" data-effect="copy" draggable="true" style="background: orange;">英语</div>
            <div class="item" data-effect="copy" draggable="true" style="background: pink;">地理</div>
            <div class="item" data-effect="copy" draggable="true" style="background: rgb(221, 53, 185);">历史</div>
            <div class="item" data-effect="copy" draggable="true" style="background: rgb(68, 168, 226);">政治</div>
            <div class="item" data-effect="copy" draggable="true" style="background: rgb(233, 229, 32);">体育</div>
        </div>
        <div class="content">
            <table>
                <thead>
                    <tr style="height:50px">
                        <th>\</th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</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>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>
                    </tr>
                    <tr>
                        <td>3</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>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>
                    </tr>
                    <tr>
                        <td>5</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>6</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>7</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>                    
                </tbody>
            </table>
        </div>
    </div>

.container{
    display: flex;
    width: 100%;
    height: 500px;
    background-color: #fff;
}
.options{
    width: 160px;
    height: 100%;
    border: 1px solid #aaa;   
    font-weight: bold;    
}
.item{
    width:80%;
    height: 40px;
    line-height: 40px;
    background-color: lightgreen;
    text-align: center;
    margin: 5px auto;
    color: #fff;
}
.content{
    flex: 1 1 auto;
    background: #f5f5f5;
}
.content table{
    width:100%;
    height: 100%;
    /* border-collapse: collapse; */
}
.content table td,.content table th{
    border: 2px solid #eee;
    text-align: center;
}
.drag-over{
    background: #aaa
}

const container = document.querySelector(".container");
//拖拽开始时触发
let dragDom = null;
container.ondragstart = function(e){
    dragDom = e.target;
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
}
//拖拽进入另一个元素时触发
container.ondragenter = function(e){
    const dropNode=getDropNode(e.target);
    clearStyles();
    if(!dropNode){
        return ;
    }
    if(dropNode.dataset.drop === dragDom.dataset.effect){
       dropNode.classList.add("drag-over");
    }else{
        return ;
    }
}

container.ondragover = (e)=>{
    e.preventDefault();
}

container.ondrop = function(e){
   const dropNode = getDropNode(e.target);
   if(!dropNode ){
        return;
   }
   if(dragDom.dataset.effect !== dropNode.dataset.drop){
        return;
   }
   clearStyles();
   if(dropNode.dataset.drop === "copy"){
        const clone = dragDom.cloneNode(true);
        clone.dataset.effect="move";
        dropNode.innerHTML = "";
        dropNode.appendChild(clone);
   }else{
    //move
    dragDom.remove();
   }   
}

function clearStyles(){
    document.querySelectorAll(".drag-over").forEach(node=>{
        node.classList.remove("drag-over");
    })
}

function getDropNode (node){
    while(node){
        if(node.dataset && node.dataset.drop){
            return node;
        }
        node = node.parentNode;
    }
    return null;
}