Code Block Template

<div id="floatingButtons">
    <a href="index.html" class="floating-button" id="homeBtn">
        <i class="fa fa-home"></i> Home
    </a>
    <a href="posts.html" class="floating-button" id="postsBtn">
        <i class="fa fa-newspaper"></i> Posts
    </a>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

#postsBtn {
        background: #28a745;
        left: 130px;
    }
    #postsBtn:hover { background: #218838; }
</style>

button.addEventListener("mousedown", dragStart);
        button.addEventListener("mouseup", dragEnd);
        button.addEventListener("mousemove", drag);
        
        button.addEventListener("touchstart", dragStart);
        button.addEventListener("touchend", dragEnd);
        button.addEventListener("touchmove", drag);

function dragStart(e) {
            e.preventDefault();
            isDragging = false;
            startTime = new Date().getTime();
            const touch = e.type === "touchstart" ? e.touches[0] : e;
            startX = touch.clientX - xOffset;
            startY = touch.clientY - yOffset;
        }

function drag(e) {
            const touch = e.type === "touchmove" ? e.touches[0] : e;
            let moveX = touch.clientX - startX;
            let moveY = touch.clientY - startY;
            
            if (Math.abs(moveX) > 5 || Math.abs(moveY) > 5) {
                isDragging = true;
            }

if (isDragging) {
                e.preventDefault();
                xOffset = moveX;
                yOffset = moveY;
                setTranslate(xOffset, yOffset, button);
            }
        }

function dragEnd(e) {
            let endTime = new Date().getTime();
            if (!isDragging || endTime - startTime < 200) {
                // Allow click even after dragging
                window.location.href = link;
            }
            isDragging = false;
        }

function setTranslate(xPos, yPos, el) {
            el.style.transform = translate(${xPos}px, ${yPos}px);
        }
    }

makeDraggable("homeBtn", "index.html");
    makeDraggable("postsBtn", "posts.html");
</script>