<html>

<head>
    <title>JavaScript</title>
    <style>
        .copyMe {
            display: inline-block;
            padding: 15px;
            border: 1px solid black;
            position: absolute;
            width: 60px;
            text-align: center;
            height: 40px;
            cursor: pointer;
            overflow: hidden;
        }
        
        .newb {
            color: red;
        }
        
        #garbage {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: black;
            left: 500px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div id="garbage"></div>
    <div class="copyMe">Hello<img src="https://via.placeholder.com/100x50/0f9"></div>
    <div class="copyMe">
        <h1>Hello </h1>World</div>
    <div class="copyMe">JavaScript
        <br> Course</div>
    <div class="copyMe">Wow</div>
    <div class="copyMe">Wow #2</div>
    <div class="copyMe">More random Content</div>
    <script>
        const garbage = document.getElementById("garbage");
        const rep = document.querySelectorAll(".copyMe");
        let holder = {};
        rep.forEach(function (ele, ind) {
            ele.addEventListener("click", function (e) {
                holder.obj = ele.cloneNode(true);
                holder.obj.style.cursor = "move";
                holder.obj.classList.add("newb");
                holder.obj.style.backgroundColor = ranColor();
                holder.obj.style.left = ele.offsetLeft + "px";
                holder.obj.style.top = ele.offsetTop + 200 + "px";
                holder.obj.startX = ele.offsetLeft;
                holder.obj.startY = ele.offsetTop;
                holder.obj.moves = Math.floor(Math.random() * 25);
                holder.obj.int = setInterval(mover, 25);

                function mover() {
                    if (holder.obj.moves <= 0) {
                        clearInterval(holder.obj.int);
                    }
                    else {
                        holder.obj.moves--;
                        holder.obj.startY += 10;
                        holder.obj.startX += 1;
                        holder.obj.style.top = holder.obj.startY + "px";
                        holder.obj.style.left = holder.obj.startX + "px";
                    }
                }
                document.body.appendChild(holder.obj);
                drager(holder.obj);
            })
            ele.style.left = ind * 100 + "px";
        })

        function ranColor() {
            function c() {
                let hex = Math.floor(Math.random() * 256).toString(16);
                hex = ("0" + String(hex)).substr(-2);
                return hex;
            }
            return "#" + c() + c() + c();
        }

        function drager(el) {
            let pos = {};
            el.onmousedown = dragMouse;

            function dragMouse(e) {
                pos.nx = e.clientX;
                pos.ny = e.clientY;
                document.onmouseup = function () {
                    document.onmouseup = null;
                    document.onmousemove = null;
                }
                document.onmousemove = function (e) {
                    pos.ox = pos.nx - e.clientX;
                    pos.oy = pos.ny - e.clientY;
                    pos.nx = e.clientX;
                    pos.ny = e.clientY;
                    if (isCollide(el)) {
                        el.onmousedown = null;
                        el.parentElement.removeChild(el);
                    }
                    el.style.top = (el.offsetTop - pos.oy) + "px";
                    el.style.left = (el.offsetLeft - pos.ox) + "px";
                }
            }
        }

        function isCollide(a) {
            let aRect = a.getBoundingClientRect();
            let bRect = garbage.getBoundingClientRect();
            return !(
                (aRect.bottom < bRect.top) || (aRect.top > bRect.bottom) || (aRect.right < bRect.left) || (aRect.left > bRect.right))
        }
    </script>
</body>

</html>