课表,拖拽

课表,拖拽_第1张图片

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        table {
            border-collapse: collapse;
        }

        th {
            border: 1px solid #000;
            width: 100px;
            height: 50px;
            text-align: center;
        }

        td {
            border: 1px solid #000;
            width: 100px;
            height: 50px;
            text-align: center;
        }

        .container {
            display: flex;
        }

        .left {
            width: 120px;
            border: 1px solid #000;
            overflow: auto;
        }

        .item {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #000;
            margin: 10px;
        }

        .hover {
            background: #ccc;
        }
    style>
head>
<body>
<div class="container">
    <div class="left" data-drop="move">
        <div data-effect="copy" draggable="true" class="item" style="background: blue">语文div>
        <div data-effect="copy" draggable="true" class="item" style="background: green">英语div>
        <div data-effect="copy" draggable="true" class="item" style="background: red">数学div>
        <div data-effect="copy" draggable="true" class="item" style="background: yellowgreen">科学div>
        <div data-effect="copy" draggable="true" class="item" style="background: teal">物理div>
        <div data-effect="copy" draggable="true" class="item" style="background: blueviolet">化学div>
        <div data-effect="copy" draggable="true" class="item" style="background: aqua">食物div>
        <div data-effect="copy" draggable="true" class="item" style="background: saddlebrown">美食div>
        <div data-effect="copy" draggable="true" class="item" style="background: hotpink">足球div>
    div>
    <div class="right">
        <table>
            <tr>
                <th>th>
                <th>星期一th>
                <th>星期二th>
                <th>星期三th>
                <th>星期四th>
                <th>星期五th>
                <th>星期六th>
                <th>星期日th>
            tr>
            <tr>
                <td rowspan="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>
                <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>
                <td data-drop="copy">td>
            tr>
            <tr>
                <td rowspan="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>
                <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>
                <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>
                <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>
                <td data-drop="copy">td>
            tr>
            <tr>
                <td rowspan="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>
                <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>
                <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>
                <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>
                <td data-drop="copy">td>
            tr>
            <tr>
                <td rowspan="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>
                <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>
                <td data-drop="copy">td>
            tr>
        table>
    div>
div>
<script>
    const container = document.querySelector('.container');
    let sourceNode = null;
    function getDropNode(node) {
        while (node) {
            if (node?.dataset?.drop) {
                return node;
            }
            node = node?.parentNode;
        }
    }
    function clearDropStyle() {
        const dropNodes = document.querySelectorAll('[data-drop]');
        dropNodes.forEach(node => {
            node.classList.remove('hover');
        })
    }
    container.addEventListener('dragstart', function (e) {
        e.dataTransfer.effectAllowed = e.target.dataset.effect;
        sourceNode = e.target;
    })
    container.addEventListener('dragover', function (e) {
        e.preventDefault();
    });
    container.addEventListener('dragenter', function (e) {
        clearDropStyle();
        const dropNode = getDropNode(e.target);
        if (!dropNode) return;
        if (e.dataTransfer.effectAllowed === dropNode.dataset.drop) {
            dropNode.classList.add('hover');
        }
    })
    container.addEventListener('drop', function (e) {
        clearDropStyle();
        const dropNode = getDropNode(e.target);
        if (!dropNode) return;
        if (e.dataTransfer.effectAllowed != dropNode.dataset.drop) return;
        if (e.dataTransfer.effectAllowed === 'copy') {
            dropNode.innerHTML = ''
            const clone = sourceNode.cloneNode(true);
            clone.dataset.effect = 'move';
            dropNode.appendChild(clone);
        } else {
            sourceNode.remove();
        }
    })
script>
body>
html>

你可能感兴趣的:(前端样式,javascript,前端,开发语言)