Snap Svg how to hang an event by dragging the mouse so that you can click and rotate around the axis?

Question

the task is this, I need to draw a circle divided into equal parts, draw more circles with text / pictures on them - I did this, BUT I still need to make it spin when I clicked on any circle and twist in different directions

here is the code I wrote

(function(){
 var snap = Snap('#svgElem'), r = 200,
    i = 0,
    cx = 400,
    cy = 400, x1, x2, y1, y2, index, angle, prev_color, papers = snap.selectAll()
    
    papers.clear();
    
    var initial_angle = 0, n = 12, actual_angle = 360 / n, rad = Math.PI / 180, sectors, circle, j = n;

    for (i = 0; i < n; i++) {
        var end_angle = initial_angle + actual_angle;
        var sector_path = sector(cx, cy, r+120, initial_angle, end_angle, rad);

        var mpx1 = parseFloat(cx + (r+120) * Math.cos(-(initial_angle+actual_angle/2)*rad));
        var mpy1 = parseFloat(cy + (r+120) * Math.sin(-(initial_angle+actual_angle/2)*rad));

        // Circle
        circle = snap.g().append(snap.circle(mpx1, mpy1, 40).attr({ fill: "rgb(236, 240, 241)", stroke: "#000", strokeWidth: 1, cursor: 'pointer'})).append(text_path(mpx1, mpy1, i))

        sectors = snap.group(sector_path, circle)
        papers.push(sectors);
        initial_angle = end_angle;
    }

    function sector(cx, cy, r, startAngle, endAngle, rad) {
        
        x1 = parseFloat(cx + r * Math.cos(-startAngle * rad));
        x2 = parseFloat(cx + r * Math.cos(-endAngle * rad));
        y1 = parseFloat(cy + r * Math.sin(-startAngle * rad));
        y2 = parseFloat(cy + r * Math.sin(-endAngle * rad));

        var flag = (endAngle - startAngle > 180) ? 1 : 0;

        var sectorpath = "M "+ cx + " "+ cy + " L"+ x1 +" "+ y1 + " A"+ r +" "+ r +" "+ 0 + " " + flag + " "+ 0 +" "+ x2 +" "+" "+ y2 +"z";
        
        // console.log(sectorpath);
        
        return snap.path(sectorpath).attr({fill: 'none', class: 'sectors', stroke: "black" });
    }

    function text_path(x, y, i) {
        var text = snap.text(x, y, (n-i));
        text.attr({'text-anchor': 'middle', 'alignment-baseline': 'middle' })
        
        return text;
    }
}())

here is an example of the code that I use https://codepen.io/DuneKonaren/pen/wvPrpzZ?editors=1010

the code would be corrected by adding the ability to click on any circle and rotate the mouse around the axis in any direction, thanks

UPDATE

I added a drag event in a circle, only for me it doesn't work around the assigned X and Y points!

that is, I need to be spinning on the spot, and I have spinning going beyond the limits in an incomprehensible circle

here is an updated example https://codepen.io/DuneKonaren/pen/wvPrpzZ?editors=1010