Horizontal Click & Drag

<script>

document.addEventListener('DOMContentLoaded', function() {

    const ele = document.getElementById('clickanddrag');

‍

    // Check if the screen width is greater than 768px (adjust this value as needed)

    if (window.innerWidth > 768) {

        ele.style.cursor = 'grab';

‍

        let pos = { top: 0, left: 0, x: 0, y: 0 };

‍

        ele.style.overflowX = 'hidden'; // Hide the horizontal scrollbar

‍

        const mouseDownHandler = function(e) {

            ele.style.cursor = 'grabbing';

            ele.style.userSelect = 'none';

‍

            pos = {

                left: ele.scrollLeft,

                top: ele.scrollTop,

                x: e.clientX,

                y: e.clientY,

            };

‍

            document.addEventListener('mousemove', mouseMoveHandler);

            document.addEventListener('mouseup', mouseUpHandler);

        };

‍

        const mouseMoveHandler = function(e) {

            const dx = e.clientX - pos.x;

            const dy = e.clientY - pos.y;

‍

            ele.scrollTop = pos.top - dy;

            ele.scrollLeft = pos.left - dx;

        };

‍

        const mouseUpHandler = function() {

            ele.style.cursor = 'grab';

            ele.style.removeProperty('user-select');

‍

            document.removeEventListener('mousemove', mouseMoveHandler);

            document.removeEventListener('mouseup', mouseUpHandler);

        };

‍

        ele.addEventListener('mousedown', mouseDownHandler);

    }

});

</script>