How to use the @mathigon/boost.Draggable function in @mathigon/boost

$handle.exit('fade');
    $outline.exit('fade');
    $outlineHalo.exit('fade');
    $step.score('circle-' + i);
    $step.addHint('correct');
    burst.play(1000, [320, 180], [70, 50]);
  }

  for (let c of circles) {
    let rReady = false, cReady = false;

    const $handle = $N('circle', {class: 'handle', r: 10}, $svg);
    const $outlineHalo = $N('circle', {class: 'outline-halo', r: c[2]}, $strokes) as SVGView;
    const $outline = $N('circle', {class: 'outline', r: c[2]}, $strokes) as SVGView;
    const drag = new Draggable($handle, $svg, {snap: 20, useTransform: true});

    drag.on('move', (p) => {
      $outline.setCenter(p);
      $outlineHalo.setCenter(p);
      cReady = (p.x === 320 && p.y === 180);
      if (rReady && cReady) complete(c[3], $handle, $outline, $outlineHalo);
    });

    drag.on('end', () => {
      if (!cReady || rReady || hasShownResizeGesture) return;
      hasShownResizeGesture = true;
      const shift = new Point(-$outline.attr('r'), 0);
      const slide = new Point(+$outline.attr('r') - 60, 0);
      $gesture.setTarget($handle, slide, shift);
      setTimeout(() => $gesture.start(), 1000);
    });

function addPoint(posn: SimplePoint) {
    const $c = $N('circle', {r: 15, cx: 0, cy: 0}, $svg);
    const drag = new Draggable($c, $svg, {useTransform: true});

    drag.on('move', (e) => {
      posn.x = e.x;
      posn.y = e.y;
      redraw();
    });

    drag.on('click', () => {
      $c.remove();
      drag.disabled = true;
      points = points.filter(p => p !== posn);
      redraw();
    });

    drag.on('end', () => {
      move += 1;

const $triangle = $N('path', {class: 'triangle'}, $chart.$overlay) as SVGView;
  const $lineX = $N('line', {class: 'line-x', target: 'dx'}, $chart.$overlay) as SVGView;
  const $lineY = $N('line', {class: 'line-y', target: 'dy'}, $chart.$overlay) as SVGView;

  const $labelX = $N('div', {class: 'chart-label blue', target: 'dx'}, $chart);
  const $labelY = $N('div', {class: 'chart-label green', target: 'dy'}, $chart);

  const $svg = $chart.$overlay.$ownerSVG;

  function pfn(p: Point) {
    const q = $chart.plotToMathCoords(p);
    const x = clamp(roundTo(q.x, 0.5), -4, 4);
    return $chart.mathToPlotCoords(new Point(x, 1.5 * x));
  }

  const drag = new Draggable($point, $chart, {round: pfn});
  let hasSelected = false;

  $chart.on('mousemove', (e) => {
    if (hasSelected) return;

    const p = $chart.plotToMathCoords(svgPointerPosn(e, $svg));
    if (Math.abs(p.y - 1.5 * p.x) > 1) {
      $point.removeClass('visible');
    } else {
      $point.addClass('visible');
      const point = $chart.mathToPlotCoords(new Point(p.x, 1.5 * p.x));
      drag.setPosition(point.x, point.y);
    }
  });

  $chart.on('click', (e) => {

$step.$$('svg').forEach(($s, i) => {
    const $polygons = $s.$$('polygon');
    $polygons[0].transform = `translate(${initial[i].x}px, ${initial[i].y}px)`;

    const drag = new Draggable($polygons[1], $s, 'xy', 10, true, 20);
    drag.position = initial[i];
    drag.on('end', () => {
      if (drag.position.x === correct[i].x && drag.position.y === correct[i].y) {
        drag.disabled = true;
        $step.score('drag-' + i);
        $step.addHint('correct');
        $polygons[1].css('cursor', 'default');
      }
    });
  });
}

function addPoint(posn) {
    const $c = $N('circle', {r: 15, cx: 0, cy: 0}, $svg);
    const drag = new Draggable($c, $svg, {useTransform: true, responsive: true});

    drag.on('move', (e) => {
      posn.x = e.x;
      posn.y = e.y;
      redraw();
    });

    drag.on('click', () => {
      $c.remove();
      drag.disabled = true;
      points = points.filter(p => p !== posn);
      redraw();
    });

    drag.on('end', () => {
      move += 1;

const $point1 = $N('div', {class: 'chart-point fixed', hidden: true}, $chart);
  const $point2 = $N('div', {class: 'chart-point fixed', hidden: true}, $chart);

  const $triangle = $N('path', {class: 'triangle'}, $chart.$overlay) as SVGView;
  const $lineX = $N('line', {class: 'line-x'}, $chart.$overlay) as SVGView;
  const $lineY = $N('line', {class: 'line-y'}, $chart.$overlay) as SVGView;

  function pfn(p: Point) {
    const q = $chart.plotToMathCoords(p);
    const x = clamp(roundTo(q.x, 0.5), -4, 4);
    return $chart.mathToPlotCoords(new Point(x, 3 / 4 * x + 2));
  }

  const drag1 = new Draggable($point1, $chart, {round: pfn});
  const drag2 = new Draggable($point2, $chart, {round: pfn});

  drag1.on('move', (posn: Point) => {
    const corner = {x: drag2.position.x, y: posn.y};
    $lineX.setLine(posn, corner);
    $lineY.setLine(corner, drag2.position);
    $triangle.points = [drag2.position, corner, posn];
  });

  drag2.on('move', (posn) => {
    const corner = {x: posn.x, y: drag1.position.y};
    $lineX.setLine(corner, drag1.position);
    $lineY.setLine(posn, corner);
    $triangle.points = [drag1.position, corner, posn];
  });

  drag1.setPosition(180, 145);

ready() {
    const $svg = this.$('svg') as SVGParentView;

    $N('ellipse', {cx: 380, cy: 220, rx: 366, ry: 206, class: 'pool-table'}, $svg);
    this.$path = $N('path', {fill: 'transparent', stroke: 'white'}, $svg) as SVGView;

    const $start = $N('circle', {r: 20, fill: '#fd8c00'}, $svg);
    const drag = new Draggable($start, $svg, {useTransform: true});

    this.$end = $N('circle', {r: 20, fill: '#0f82f2'}, $svg) as SVGView;

    drag.on('move', (p) => this.drawPath(p));
    drag.setPosition(380, 220);
  }

export async function sphereMaps($step: Step) {
  const $svgs = $step.$$('svg.sphere-map');
  const $grid = $svgs.map($svg => $svg.$('.grid')!);
  const $land = $svgs.map($svg => $svg.$('.land')!);
  const $rect = $svgs.map($svg => $svg.$('.map-select')!);
  const $outline = $svgs.map($svg => $svg.$('.outline')!);

  const polygon = new Rectangle(new Point(-24, -24), 48, 48).polygon;
  const points = tabulate((i) => polygon.at(i / 64), 64);

  const drag = new Draggable($rect[1], $svgs[1],
      {useTransform: true, margin: 26});
  drag.setPosition(220, 140);

  const {d3, topojson, world} = await loadD3();

  const grid = d3.geoGraticule()();
  const land = topojson.feature(world, world.objects.land);
  const projections: Obj = {
    Cylindrical: (d3 as any).geoCylindricalEqualArea().scale(90),
    Mercator: d3.geoMercator().scale(70),
    Mollweide: (d3 as any).geoMollweide().scale(78),
    Robinson: (d3 as any).geoRobinson().scale(70)
  };

  const globeProjection = d3.geoOrthographic().clipAngle(90)
      .translate([120, 120]).scale(118);