全栈的自我修养 ———— js中的拖拽api

2024-03-17 20:34:04
开发
44

今天让我们试一下js中的比较有趣味的拖拽api，用他来做成一个课程表！

一、实现目标
二、过程
三、源码

一、实现目标

在这里插入图片描述

二、过程

1、html实现

第一步

创建一个container的拖拽区域，左边准备放课程，然后给每一个div设置同一个draggable为truetrue，即允许拖拽
在这里插入图片描述

第二步

然后创建两个table里面的格子分布如下所示

在这里插入图片描述

js实现

    <script>
    // container是可拖拽区域，超出这个范围无效
        const container = document.querySelector('.container');
	// 获得那两个table
        const table = document.querySelectorAll('.table')
        // 拖拽开始位置
        container.ondragstart = (e) => {
        	// 图表示拖拽
            e.dataTransfer.effectAllowed = 'move';
            // 将拖拽的文本内容设置在拖拽的参数里面
            e.dataTransfer.setData('text', e.target.innerText);
        }
        // 定义拖拽的过程(必不可少，因为这个过程一直记录拖拽的位置！！)
        container.ondragover = (e) => {
            e.preventDefault();
        }
        // 拖拽进入组件的事件
        // table.ondragenter = (e) => {
        // }
        // // 拖拽离开组件的事件
        // table.ondragleave = (e) => {
        // }
        // 给两个table的松手时候的位置设置拖拽事件
        table.forEach(item => {
            item.ondrop = (e) => {
                e.preventDefault();
                // 获得拖拽体中开始记录的文本内容
                const courseName = e.dataTransfer.getData('text');

                // 将拖拽到的区域填入文本内容
                e.target.innerHTML = `<td>${courseName}</td>`;
            }
        })

    </script>

在这里插入图片描述

三、源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
        }

        .left {
            border-radius: 20px;
            margin: 0px 10px;
            background-color: rgba(62, 63, 63, 0.4);
            font-size: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px 50px;
        }

        .right {
            border-radius: 20px;
            padding: 20px;
            background-color: rgba(62, 63, 63, 0.4);
        }

        .right table tr td {
            text-align: center;
            /* 水平居中文本 */
            vertical-align: middle;
            /* 垂直居中文本 */
            width: 20px;
            height: 20px;
        }

        .item {
            margin-bottom: 10px;
            padding: 10px 20px;
            border-radius: 10px;
            opacity: 0.8;
            float: left;
            white-space: nowrap;
        }

        tr {
            height: 50px;
        }

        .color1 {
            background-color: #ff0000;
        }

        .color2 {
            background-color: #00ff00;
        }

        .color3 {
            background-color: #0000ff;
        }

        .color4 {
            background-color: #ffff00;
        }

        .color5 {
            background-color: #ff00ff;
        }

        .color6 {
            background-color: #00ffff;
        }

        .color7 {
            background-color: #808080;
        }
    </style>
</head>

<body>
    <h1>课程表</h1>
    <div class="container">
        <div class="left">
            <div draggable="true" class="color1 item">语文</div>
            <div draggable="true" class="color2 item">数学</div>
            <div draggable="true" class="color3 item">英语</div>
            <div draggable="true" class="color4 item">音乐</div>
            <div draggable="true" class="color5 item">政治</div>
            <div draggable="true" class="color6 item">历史</div>
            <div draggable="true" class="color7 item">体育</div>
        </div>
        <div class="right">
            <table border="1" width="800px" height="270px" class="table">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <br><br><br>
            <table border="1" width="800px" height="270px" class="table" fixed>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        const container = document.querySelector('.container');
        const table = document.querySelectorAll('.table')
        // 拖拽开始位置
        container.ondragstart = (e) => {
            e.dataTransfer.effectAllowed = 'move';
            console.log(e.target);
            e.dataTransfer.setData('text', e.target.innerText);
        }
        // 定义拖拽的过程
        container.ondragover = (e) => {
            e.preventDefault();
        }
        // 拖拽进入组件的事件
        // table.ondragenter = (e) => {
        // }
        // // 拖拽离开组件的事件
        // table.ondragleave = (e) => {
        // }
        // 松手时候的位置
        table.forEach(item => {
            item.ondrop = (e) => {
                e.preventDefault();
                const courseName = e.dataTransfer.getData('text');

                // 创建一个新单元格
                e.target.innerHTML = `<td>${courseName}</td>`;
            }
        })

    </script>
</body>

</html>

原文地址:https://blog.csdn.net/2401_82752568/article/details/136738131 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1769341428934250496.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部