如何通过拖动JSXGraph中的另一个元素来拖动滑翔机

Question

I have a glider on a line that animates after you drag it. I have then created a box (using 4 points and polygon) next to the glider.

My problem is, I would like to have the user drag this box to drag the glider, and have the box move with the glider.

Here is a link to the full code I'm currently working with, which helps visualize the problem https://jsfiddle.net/uobdpw0y/2/

The glider is the red point, and the line it glides on is blue. As you can see, the box moves when dragging the red point, but won't move when dragging any other part of the box.

Here is the code relevant to the question:

  // create the mass at the moving end of the spring
  var point = board.create('glider', [5, 0, line], {withLabel: false, size: 1});

...

  // create moving box at end of spring
  var opts = {withLabel: false, size: 0, strokeColor:'green', fillColor:'green'};
  var boxPoints = [];
  boxPoints.push(board.create('point',[function(){return point.X()}, 0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()}, -0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()+2}, -0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()+2}, 0.5], opts));

  board.create('polygon', boxPoints, {hasInnerPoints: true});
  board.create('group', boxPoints);

The desired result would be similar to the functionality seen in the Group documentation https://jsxgraph.org/docs/symbols/Group.html#781b5564-a671-4327-81c6-de915c8f924e Here the box they've created moves as you drag any part of it.

The initial solution I tried was to include the glider in the Group of points used for the box, but only Point objects can be added, and not Glider objects.

Answer 1

This is a very nice construction. My suggestion is the following:

var point = board.create('point', [5, 0], {withLabel: false, size: 1});

// ...

var boxPoints = [];
boxPoints.push(board.create('point',[point.X(), 0.5], opts));
boxPoints.push(board.create('point',[point.X(), -0.5], opts));
boxPoints.push(board.create('point',[point.X()+2, -0.5], opts));
boxPoints.push(board.create('point',[point.X()+2, 0.5], opts));

var pol = board.create('polygon', boxPoints, {hasInnerPoints: true});
board.create('group', boxPoints.concat([point]));
boxPoints[0].on('move', function(e) {
  this.moveTo([this.X(), 0.5], 0);
});
point.on('drag', function(e) {
  this.moveTo([this.X(), 0], 0);
});
pol.on('drag', function(e) {
  point.moveTo([point.X(), 0], 0);
  boxPoints[0].moveTo([point.X(), 0.5], 0);
});

That is, the glider is now a simple point and the vertical position of that point and the box is corrected in each move/drag event. See it at https://jsfiddle.net/rqx48shb/3/ in action.