Prevent draggable circle using Leaflet circle and leaflet-draw library

Question

I have a circle that I add to the map when you click on a specific point (centroid of that circle will be where the point is) and you can edit the circle, meaning you can resize it using the gripper on the end of the circle:

The resizing is working fine but what I want to do is prevent the circle from being draggable:

How do I disable dragging the circle but still keep the resizing? I am using the leaflet-draw library and as well as @types/leaflet-draw packages. And here is how I am adding the circle to the map:

  onMapClick(leafletMouseEvent: LeafletMouseEvent) {
    const drawControl = new L.Control.Draw({
      draw: {
        circle: true, // Enable circle drawing
      },
      edit: {
        featureGroup: new L.FeatureGroup()
      }
    });
    
    map.addControl(drawControl);
    
    // Initialize the feature group for drawn items
    drawnItems = new L.FeatureGroup();
    
    map.addLayer(drawnItems);
    
    map.on(L.Draw.Event.CREATED, (e: any) => {
      let layer = e.layer;
      drawnItems.addLayer(layer); // Add shape to current drawing
    });
    
    map.on(L.Draw.Event.EDITED, (e: any) => {
      let layers = e.layers;
      layers.eachLayer((layer: any) => {
        drawnItems.addLayer(layer);
      });
    });
    
    const circle: any = new L.Circle(latLng, {
      radius: 1609.34, // 1 mile in meters
    });
    
    drawnItems.addLayer(circle);
    
    circle.editing.enable()
 }

Answer 1

I have only found a hack to prevent the circle from moving, maybe you can extend on it:

'use strict';

var startPosition = [33.812511, -117.918976];
var map = L.map('mapId').setView(startPosition, 12);
var drawnItems = L.featureGroup().addTo(map);
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

map.addControl(new L.Control.Draw({
  edit: {
    featureGroup: drawnItems,
    circle: {
      allowIntersection: false
    }
  }
}));

var circle = L.circle(startPosition, 1609.34).addTo(drawnItems);
circle.editing.enable();

map.on(L.Draw.Event.EDITMOVE, function(ev) {
  circle.setLatLng(ev.target._lastCenter);
});

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#mapId {
  flex-grow: 1;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-draw@1/dist/leaflet.draw.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-draw@1/dist/leaflet.draw.min.css">

<div id="mapId"></div>