SnapSvg как повесить эвент перетаскивая мышкой, что бы можно было кликнуть и крутить вокруг оси?

Всем привет, задача такая, мне нужно отрисовать круг разделенный на равные части, на них отрисовать еще кружочки с текстом/картинками - это я сделал, НО надо еще заставить крутиться когда нажал на любой кружочек и крутишь в разные стороны

вот код который я написал

(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;
        }
}())

вот пример кода который используется у меня https://codepen.io/DuneKonaren/pen/wvPrpzZ?editors=1010

код подправить бы добавив возможность кликнуть на любой круг и крутить мышкой вокруг оси в любую сторону

UPDATE

я добавил эвент перетаскивания по кругу, только у меня это работает не вокруг назначенных точек X и Y!

то есть мне надо что бы на месте крутилось, а у меня крутится выходя за пределы по не понятному кругу

вот обновленный пример https://codepen.io/DuneKonaren/pen/wvPrpzZ?editors=1010