Movable/Draggable Rectangle

https://jsfiddle.net/6pd82b5r/#run

by aaronamran

HTML

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>
<p id="init">[
  [ "grid", "x","y",-1, 15,-1,11, 40],
  [ "polygon", "", [5,4.5],[5,3.5], [8,3.5], [8,4.5], "show"]
  ]
</p>
<p id="data"></p>
<p id="fbd_names"></p>

<!-- 
make object can rotate and drag.
fixed: false - corners can be dragged, but shaped isnt maintain.
isDraggable: true - shape can be dragged around, but cannot be rotated.

idea from force object:
this.vec = board.create('arrow', [this.p1, this.p2], {
      touchLastPoint: true, lastArrow:{size:5, type:2}, highlight:hl,
      highlightStrokeColor:highlightColor, strokeColor:loadColor});
    if (this.state == "active") {this.vec.setAttribute({fixed: false});}
    this.vec.obj = [this.vec, this.p1, this.p2];
    this.vec.parent = this;  
    // translation by base point drag
    const g = board.create('group', [this.p1, this.p2]);
    
UPDATE: group objects, then use moveTo() to move objects from one point to another.
check through github list of objects, to decide which ones are suitable.
fork the github repository
-->

JavaScript

// Start of jsfiddle header.
var mode = "jsfiddle";
var divid = "jxgbox";
var fbd_names = "fbd_names";
var stateRef = "data";
var initstring = document.getElementById("init").innerHTML;
const centeredLabelStyle = {
  size: 0,
  showInfobox: false,
  label: {
    offset: [0, 0],
    anchorX: 'middle',
    anchorY: 'middle'
  }
};

// End of jsfiddle header

// https://github.com/mkraska/meclib/wiki
// version info
const versionText = "JXG " + JXG.version + " Meclib 2023 01 13";
const highlightColor = "orange";
const movableLineColor = "blue";
const loadColor = "blue";
const defaultMecLayer = 6;
var pxunit = 1 / 40; // is reset by "grid"
var a = 16 * pxunit; // is reset by "grid"
const deg2rad = Math.PI / 180,
  rad2deg = 180 / Math.PI;
const tolPointLine = 0.001;
var xscale = 1,
  yscale = 1; // default scale for infobox, can be modified by "grid"
var dpx = 1,
  dpy = 1; // default decimal precision for infobox, can be modified by "grid"
// infobox settings, further settings after board initiation
JXG.Options.infobox.layer = defaultMecLayer + 5;
JXG.Options.infobox.strokeColor = 'black';
JXG.Options.infobox.cssStyle = 'background-color: #ffffffdd;'
// snap settings. Interactive objects are handled explicity
JXG.Options.point.snapToGrid = false; // grid snap spoils rotated static objects
JXG.Options.point.snapSizeX = 0.1;
JXG.Options.point.snapSizeY = 0.1;
// interactive objects are released explicitly
JXG.Options.point.fixed = true;
JXG.Options.line.fixed = true;
JXG.Options.circle.fixed = true;
// label settings
JXG.Options.text.useMathJax = true;
JXG.Options.text.parse = false;
JXG.Options.label.useMathJax = true;
JXG.Options.label.offset = [0, 0];
JXG.Options.label.anchorY = 'middle';
// highlighting is activated explicitly for interactive objects
JXG.Options.curve.highlight = false;
JXG.Options.label.highlight = false;
JXG.Options.text.highlight = false;
JXG.Options.circle.highlight = false;
JXG.Options.line.highlight = false;
JXG.Options.polygon.highlight =...