How to add a javascript that attached mouse drag/move eventlistener to text created by svg and css

Question

I have a SVG file that contains CSS, please help how to add javascript that will add eventlistener to the text element. Here is my SVG text element:

<g transform="matrix(1.0, 0.0, 0.0, 1.0, 157.92836, 980.20707)">
<text textLength="28.0" lengthAdjust="spacingAndGlyphs" x="0.0" y="0.5" style="fill: #000000; font-family: 'SVG_IDX_Calibri Font3', 'Calibri', serif; font-size: 27px; white-space: pre; ">&#x000036;&#x000030;</text>
</g>

Thanks, Esterina

I added this script, but it doesn't work.

    // Function to handle dragging of labels
    function handleDragStart(event) {
        // Save initial mouse position and label position
        event.target.initialX = event.clientX;
        event.target.initialY = event.clientY;
        event.target.initialLabelX = parseFloat(event.target.getAttribute("x"));
        event.target.initialLabelY = parseFloat(event.target.getAttribute("y"));
        event.target.isDragging = true;
    }

    function handleDragMove(event) {
        if (event.target.isDragging) {
            // Calculate new label position based on mouse movement
            var deltaX = event.clientX - event.target.initialX;
            var deltaY = event.clientY - event.target.initialY;
            var newX = event.target.initialLabelX + deltaX;
            var newY = event.target.initialLabelY + deltaY;

            // Update label position
            event.target.setAttribute("x", newX);
            event.target.setAttribute("y", newY);
        }
    }

    function handleDragEnd(event) {
        // Reset dragging flag
        event.target.isDragging = false;
    }

    // Attach event listeners to labels
    var labels = document.querySelectorAll("text.draggable-label");
    labels.forEach(function(label) {
        label.addEventListener("mousedown", handleDragStart);
        label.addEventListener("mousemove", handleDragMove);
        label.addEventListener("mouseup", handleDragEnd);
    });