前端实现可拖拽课程表【纯HTML、CSS、JS】

前言

hello，今天实现点小动画，帮助学习理解Web api的拖拽效果，这里实现的是可拖拽的课程表！#

效果图

附：作者没钱去除水印，就这样看一下简单的看一下效果吧！

实现前言知识

这里我使用事件委托，统一将拖拽事件委托给父元素contaniner。

实现该元素可拖拽

这里我们使用dom的一个属性draggable，将该属性设置为true，即可拖拽

   <div  draggable="true"  class="color-1 item">语文</div>

拖拽开始事件

container.ondragstart，记录拖拽开始时触发的事件，只触发一次，返回拖拽元素本身的dom节点

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    
    
    console.log('start', e.target)
}

拖拽结束事件

表示该元素拖拽到哪个元素之上，不断触发

container.ondragover = e => {
    
    
    e.preventDefault();
    // console.log('over', e.target)
}

拖拽移入事件

类似于mouse enter，记录该元素拖拽经过哪些元素，经过只触发一次

container.ondragenter = e => {
    
    
    // console.log('enter', e.target)
}

拖拽松开事件

拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的。为了触发需要阻止浏览器默认事件，在ondragover中阻止

container.ondrop =e=>{
    
    
// console.log('drop', e.target)
}

container.ondragover = e => {
    
    
    e.preventDefault();
    // console.log('over', e.target)
}

实现步骤

设定移动区域划分

首先，我这边有两块可以移入的区域，第一是课程类区域，第二是课程表格区域，因此，我们使用data-drop="move"和data-drop="copy"，分别代表课程类区域和课程表格区域。
这里我使用的是flex布局，将两块区域分为左右两边，也就是left和right。

 <div class="left" data-drop="move">
                <div data-effect="copy" draggable="true"  class="color-1 item">语文</div>
                <div data-effect="copy" draggable="true" class="color-2 item">数学</div>
                <div data-effect="copy" draggable="true" class="color-3 item">英语</div>
                <div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
                <div data-effect="copy" draggable="true" class="color-5 item">政治</div>
                <div data-effect="copy" draggable="true" class="color-6 item">历史</div>
            </div>

 <div class="right">
                <table border="1">
                    <colgroup>
                        <col span="6" style="background-color:#fff">
                    </colgroup>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                         <th>星期四</th>
                          <th>星期五</th>
                           <th>星期六</th>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td></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>
                    </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>
                    </tr>
                </table>
            </div>

获取拖拽节点，设定节点本身的属性

当拖拽该元素时，该节点下面会有一个‘+’的符号，这个是浏览器默认给他加上的，我们需要自定义该属性，当他拖拽到某个区域时候，就设定该属性的值为区域的值

这里我们在拖拽元素上添加一个属性data-effect="copy"，通过e.target.dataset.effect获取值，并赋值给该属性

let source;

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    
    
    //移动取消出现+号的效果
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    source = e.target
    console.log('start', e.target)
}

拖拽移动，区域样式变化

当我们拖拽移动的时候，对应的区域样式变化。
首先我们要先阻止浏览器的默认行为，否则不会触发ondrop事件

container.ondragover = e => {
    
    
    e.preventDefault();
    // console.log('over', e.target)
}

同时，进入某个区域的时候，样式发生变化，但是由于它移入可以会经过其他元素，所以我们要先清除之前拖拽的样式。

//清除移动的样式
function removeDropStyle() {
    
    
    document.querySelectorAll('.drop-over').forEach((node) => {
    
    
        node.classList.remove('drop-over')
    })
}

container.ondragenter = e => {
    
    
    //清除之前拖拽的样式
    removeDropStyle()
    const dropNode = getDropNode(e.target)
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
    
    
        //该节点能够接受目前拖拽节点
        e.target.classList.add('drop-over')
    }

    // console.log('enter', e.target)
}

到这里，我们就实现了拖拽该元素，并且移动到哪个区域，哪个区域的样式就会发生改变，接下来就是松开拖拽，对应区域就拥有拖拽元素。

拖拽松开，区域变化

我们要解决的问题有：
一、判断该元素是否有drop属性，如果没有，就去父元素找。
二、清除之前的元素
三、如果是move区域，就直接移除元素即可

container.ondrop = e => {
    
    
    //清除拖拽的样式
    removeDropStyle()
    console.log('drop', e.target)
    const dropNode = getDropNode(e.target)
    //该节点能够接受目前拖拽节点
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
    
    
        //两种情况，是拖拽到哪个区域,如果是copy区域
        if (dropNode.dataset.drop === 'copy') {
    
    
            //清除之前的元素
            dropNode.innerHTML = ''
            //把该元素复制一份
            const cloned = source.cloneNode(true)
            cloned.dataset.effect = 'move'
            dropNode.appendChild(cloned)
            //如果是move区域
        } else {
    
    
            console.log("1111111")
            source.remove()
        }
    }
}

//获取该元素是否有父元素
function getDropNode(node) {
    
    
    while (node) {
    
    
        if (node.dataset.drop) {
    
    
            return node
        }
        node = node.parentNode
    }
}

完整代码

index.js

//直接监控父元素，使用事件委托
const container = document.querySelector('.container');

let source;

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    
    
    //移动取消出现+号的效果
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    source = e.target
    console.log('start', e.target)
}

//拖拽结束事件,表示拖拽这个元素到哪个元素之上，不断触发
container.ondragover = e => {
    
    
    e.preventDefault();
    // console.log('over', e.target)
}


//拖拽移入事件，只触发一次
container.ondragenter = e => {
    
    
    //清除之前拖拽的样式
    removeDropStyle()
    const dropNode = getDropNode(e.target)
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
    
    
        //该节点能够接受目前拖拽节点
        e.target.classList.add('drop-over')
    }

    // console.log('enter', e.target)
}

//拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的，触发阻止浏览器默认事件，在ondragover中阻止
container.ondrop = e => {
    
    
    //清除拖拽的样式
    removeDropStyle()
    console.log('drop', e.target)
    const dropNode = getDropNode(e.target)
    //该节点能够接受目前拖拽节点
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
    
    
        //两种情况，是拖拽到哪个区域,如果是copy区域
        if (dropNode.dataset.drop === 'copy') {
    
    
            //清除之前的元素
            dropNode.innerHTML = ''
            //把该元素复制一份
            const cloned = source.cloneNode(true)
            cloned.dataset.effect = 'move'
            dropNode.appendChild(cloned)
            //如果是move区域
        } else {
    
    
            console.log("1111111")
            source.remove()
        }
    }
}

//获取该元素是否有父元素
function getDropNode(node) {
    
    
    while (node) {
    
    
        if (node.dataset.drop) {
    
    
            return node
        }
        node = node.parentNode
    }
}

//清除移动的样式
function removeDropStyle() {
    
    
    document.querySelectorAll('.drop-over').forEach((node) => {
    
    
        node.classList.remove('drop-over')
    })
}

index.css

body {
    
    
    margin: 0;
    padding: 0;
}

h1 {
    
    
    width: 100%;
    text-align: center;
}

.container {
    
    
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: row;

}

.left {
    
    
    width: 5%;
    background: #f3f4f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item {
    
    
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.right {
    
    
    margin-left: 40px;
    width: 95%;
    background: #f3f4f5;
}

.color-1 {
    
    
    background: red;
}

.color-2 {
    
    
    background: rgb(18, 49, 189);
}

.color-3 {
    
    
    background: rgb(22, 153, 33);
}

.color-4 {
    
    
    background: rgb(150, 136, 12);
}

.color-5 {
    
    
    background: rgb(110, 9, 114);
}

.color-6 {
    
    
    background: rgb(192, 118, 22);
}

td {
    
    
    width: 90px;
    height: 70px;
    ;
}

.drop-over {
    
    
    background: rgba(212, 13, 56, 0.067);
}

index.html

<!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>可拖拽课程表</title>
        <link href="./index.css" rel="stylesheet"></link>
    </head>
    <body>
        <h1>课程表</h1>
        <div class="container">
            <div class="left" data-drop="move">
                <div data-effect="copy" draggable="true"  class="color-1 item">语文</div>
                <div data-effect="copy" draggable="true" class="color-2 item">数学</div>
                <div data-effect="copy" draggable="true" class="color-3 item">英语</div>
                <div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
                <div data-effect="copy" draggable="true" class="color-5 item">政治</div>
                <div data-effect="copy" draggable="true" class="color-6 item">历史</div>
            </div>
            <div class="right">
                <table border="1">
                    <colgroup>
                        <col span="6" style="background-color:#fff">
                    </colgroup>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                         <th>星期四</th>
                          <th>星期五</th>
                           <th>星期六</th>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td></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>
                    </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>
                    </tr>
                </table>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>