2020Q4_JS - drag&drop

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主視窗</title>
</head>

<body>
    <div id="tab">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <div id="container"> </div>

    <div id="dragTarget">
        <h2>把資料放到這裡</h2>
        <div id="data"></div>
    </div>

    <style>
        #dragTarget {
            vertical-align: top;
            display: inline-block;
            width: 600px;
            height: 300px;
            background-color: #fdb6c4;
            user-select: none;
        }

        #container {
            /* position: fixed; */
            width: 20vw;
            max-width: 300px;
            height: 60vh;
            display: inline-block;
            overflow-y: auto;
        }

        #tab {
            vertical-align: top;
            display: inline-block;
        }

        #tab>div {
            background-color: aquamarine;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 4px;
            font-size: 2rem;
            cursor: pointer;
            user-select: none;
        }

        button {
            margin: 4px;
            background-color: #f8ff95;
        }
    </style>

    <script>
        let target = document.querySelector('#dragTarget');
        let targetData = document.querySelector('#dragTarget > #data');
        let container = document.querySelector("#container");
        let dragged;

        // 這個事件必須迴避預設動作，否則 ondrop 無法正常執行
        target.ondragover = e => {
            e.preventDefault();
        }

        target.ondrop = e => {
            e.preventDefault();

            // 取得拖進來的文字
            let dragText = dragged.getAttribute("data-real");
            targetData.innerHTML += `<p>${dragText}</p>`;
        }

        // 記錄是拖動哪個物件
        document.addEventListener("dragstart", e => {
            dragged = e.target;
        });

        document.querySelectorAll("#tab > div").forEach(tab => {
            tab.onmouseover = e => {
                // 先刪除原本的 active
                document.querySelectorAll("#tab > div.active").forEach(
                    active => active.classList.remove("active")
                );

                // 產生假資料
                let html = "";

                for (let i = 0; i < 100; i++) {
                    html += `
                    <button draggable="true" data-real="真實的資料（來自 ${tab.innerText} - ${i+1}）">
                        ${tab.innerText} - ${i+1}
                    </button>
                    `;
                }

                container.innerHTML = html;

                // 標示目前的 tab 爲 active
                tab.classList.add("active");
            }
        });
    </script>
</body>

</html>