Draggable long code block for desktop user

[shu307]

Hold the left mouse in empty area to drag

Code text is still selectable

extra.js. ( set the highlight option line_spans to non-empty string for a better experience)

(function () {
    document.querySelectorAll('pre>code').forEach(function (code) {
        code.addEventListener("mousedown", function (downEv) {
            if (downEv.target !== code) return; // disable dragging on selecting
            downEv.preventDefault(); // disable selecting on dragging
            let X = downEv.clientX;
            let move = (moveEv) => {
                code.scrollLeft -= 2 * (moveEv.clientX - X); // remove the "2 * " if it's too fast for you.
                X = moveEv.clientX;
            };
            document.addEventListener("mousemove", move);
            let dispose = () => {
                document.removeEventListener("mousemove", move);
                document.removeEventListener("mouseup", dispose);
            };
            document.addEventListener("mouseup", dispose);
        });
    });
})();

[SPyofgame200]

I make a version of your code that does:

• When we are doing a code dragging, text selecting will not happen, even if the user somehow can get the text during dragging (aka using a certain extension that collects the text)
• When we are doing a text selecting, code dragging will not happen, it will immediately stop the code dragging if a text has been selected (we prioritize text selecting to code dragging)
• The code dragging only happens if the element has the scrollability and is held long enough by the left mouse (duration = 500ms)
• It is possible to drag while the text is selected and highlighted, but I considered that as a bug, so we can't drag to view the highlighted text, consider making a button to highlight for them and use this code to drag instead

// The idea is based on https://github.com/squidfunk/mkdocs-material/discussions/4370

// Immediately Invoked Function Expression (IIFE) to encapsulate the code and avoid polluting the global scope
(function () {
    document.querySelectorAll('div.language-cpp.highlight>pre>code').forEach(function (code) {
        let scrollPosition = 0; // we are dragging the code far from this original point
        let pressTimer = null; // upon the mouse down, we will start the timer
        const duration = 500; // the duration that triggers between code dragging instead of text selecting
        let longPress = false; // if the timer surpasses the duration, then longPress is true and trigger
        let isDragging = false; // we will still priority text selecting if any is selected when we both drag and select

        const trigger_dragging = function (e) {
            // Ignore non-left mouse button clicks
            if (e.button !== 0) {
                return;
            }
            // Check if the code element has scrollability
            if (code.scrollWidth <= code.clientWidth) {
                return;
            }
            // Reset flags and initial scroll position
            longPress = false;
            isDragging = false;
            scrollPosition = e.clientX;
            // Start the timer to differentiate between a click and a long press
            if (pressTimer === null) {
                pressTimer = setTimeout(function () {
                    // if we hold long enough to start code dragging
                    longPress = true;
                    isDragging = true;
                    // Change the cursor to indicate dragging is possible
                    code.style.cursor = 'grab';
                    setTimeout(function () {
                        code.offsetHeight;
                    }, 0);
                }, duration);
            }
        };

        const cancel_dragging = function (e) {
            // If the mouse leaves the code element, cancel dragging
            if (!code.contains(e.relatedTarget)) {
                if (pressTimer !== null) {
                    clearTimeout(pressTimer);
                    pressTimer = null;
                }
                // Reset cursor and flags
                code.style.cursor = '';
                longPress = false;
                isDragging = false;
            }
        };

        const dragging = function (e) {
            // Check if any text is selected, we prioritize text selecting to code dragging
            const selection = window.getSelection();
            if (selection.toString().length > 0) {
                isDragging = false;
                code.style.cursor = '';
                return;
            }
            // If a long press has been detected and dragging is allowed, perform the dragging
            if (longPress && isDragging) {
                code.scrollLeft -= (e.clientX - scrollPosition);
                scrollPosition = e.clientX;
                e.preventDefault();
                // Clear any text selection during this process, so the bug of both drag and select is not possible
                window.getSelection().removeAllRanges();
            }
        };

        const prevent_text_selecting = function (e) {
            // prevent text selecting happens during dragging
            if (isDragging) {
                e.preventDefault();
            }
        }

        // These 6 event listeners are used only in the code and not the whole document to avoid misuse 
        code.addEventListener("mousedown", trigger_dragging);
        code.addEventListener("mousemove", dragging);
        code.addEventListener("mouseup", cancel_dragging);
        code.addEventListener("mouseout", cancel_dragging);
        code.addEventListener("mouseleave", cancel_dragging);
        code.addEventListener("click", prevent_text_selecting);
    });
})();