JSXGraph How to drag an arc with the mouse

Question

The problem is how to make an arc draggable. hasInnerPoints:true doesn't seem to do the job.

Using a group I can use the centerpoint to drag the arc around while still being able to change the radius and angle.

As you see when executing the script, the straight vectors can be dragged around using the blue line as handle. I want this also for the curved arrows.

    const board = JXG.JSXGraph.initBoard('jxgbox', {
      boundingbox: [-5, 5, 5, -5],
      axis: true
      });
      
    class force {
        constructor(nm,p1,p2) {
            this.p1 = board.create('point', p1, {name: ''});
            this.p2 = board.create('point', p2, {name: nm});
            this.vec = board.create('arrow',[this.p1,this.p2],
            {touchLastPoint: true});
        }
    }
    class moment {
        constructor(nm,p1,p2,p3) {
            this.p1 = board.create('point', p1, {name: ''});
            this.p2 = board.create('point', p2, {name: ''});
            this.p3 = board.create('point', p3, {name: nm});
            this.arc = board.create('arc',[this.p1,this.p2,this.p3],
              {isDraggable:true, strokeWidth:2, lastArrow:{type: 1, size: 5},
              hasInnerPoints:true});
            var g = board.create('group', [this.p1,this.p2,this.p3,this.arc]);
            g.removeTranslationPoint(this.p2);
            g.removeTranslationPoint(this.p3);
        }
    }
    var nameField = board.create('input', [-4.5, 4, 'F1','Name '], {cssStyle: 'width: 40px'});
    var button1 = board.create('button', [-2.5, 4, 'Kraft', function() {
         obs.push(new force(nameField.Value(),[3.5,4], [4.5,4]));
     }], {});
     var button2 = board.create('button', [-1.5, 4, 'Moment', function() {
         obs.push(new moment(nameField.Value(),[3.5,4], [4,3.5],[4,4.5]));
     }], {});
    
    var obs = []; 
    obs.push(new force('F1',[0,0], [1,1]));
    obs.push(new force('F2',[0,0], [-1,1]));
    obs.push(new force('q0 a',[4,0], [4,1]));
    obs.push(new moment('M0',[0,0], [1,0],[0,1]));

jsfiddle

Answer 1

The missing attribute to make arcs draggable is fixed:false:

class moment {
    constructor(nm,p1,p2,p3) {
        this.p1 = board.create('point', p1, {name: ''});
        this.p2 = board.create('point', p2, {name: ''});
        this.p3 = board.create('point', p3, {name: nm});
        this.arc = board.create('arc',[this.p1,this.p2,this.p3],
          {fixed:true, strokeWidth:2, lastArrow:{type: 1, size: 5}});
        var g = board.create('group', [this.p1,this.p2,this.p3,this.arc]);
        g.removeTranslationPoint(this.p2);
        g.removeTranslationPoint(this.p3);
    }
}

Of course, this only works if the defining points are draggable. See it live at https://jsfiddle.net/nqxykvbf/2/