Untitled

<!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>Document</title>
    <style>
        .draggable{
            position:absolute;
            z-index:1;
            top:0px;
            background:plum;
        }
        .draggable:hover{
            cursor: pointer;
        }
        .draggable:active{
            cursor:move;
        }
        .td-draggable{
            z-index:1;
        }
        table{
            margin-top:20px;
        }
        td{
            padding:8px;
            width:100px;
            height:100px;
        }
        .red{
            background:rgb(185, 0, 0);
        }
        .purple{
            background:rgb(73, 2, 167);
        }
        .blue{
            background:rgb(0, 129, 204);
        }
        .green{
            background:rgb(76, 156, 1);
        }
        .yellow{
            background:rgb(243, 227, 0);
        }
        .orange{
            background:rgba(255, 166, 0);
        }
    </style>
</head>
<body>
    <div class="draggable">
        Draggable Text
    </div>
    <table>
        <tr>
            <td class="red"></td>
            <td class="green"></td>
            <td class="blue"></td>
        </tr>
        <tr>
            <td class="purple"></td>
            <td class="yellow"></td>
            <td class="orange"></td>
        </tr>
    </table>
    <script>
        let drag = document.getElementsByClassName('draggable')[0];
        drag.addEventListener('mousedown', (e) =>{
            drag.classList.add('active-drag');
            // _drag.style['pointer-events'] = 'none';
        });
        document.addEventListener('mouseup', (e) =>{
            drag.classList.remove('active-drag');
            // _drag.style['pointer-events'] = 'auto';
        });
        document.addEventListener('mousemove', (e) =>{
            if(drag.classList.contains('active-drag')) {
                drag.style.top = e.pageY - drag.offsetHeight/2 + "px";
                drag.style.left = e.pageX - drag.offsetWidth/2 + "px";
            }
        });
        let cells = document.getElementsByTagName('td');
        for(item of cells){
            item.addEventListener('mousemove', (e) => {
                if(e.target.classList.contains('td-draggable')){
                    e.target.style.top = e.clientY - e.target.offsetHeight/2 + "px";
                    e.target.style.left = e.clientX - e.target.offsetWidth/2 + "px";
                }
            });
            item.addEventListener('mouseout', (e) => {
                e.target.style.background = null;
            });
            item.addEventListener('click', (e) => {
                if(e.target.classList.toggle('td-draggable')){
                    e.target.style.position = 'absolute';
                }
            })
        }
    </script>
</body>
</html>