Draggable circlemarker in folium with custom JS

folium_leaflet_cm_drag.py

import folium
from branca.element import Element

start_coords = (27.815318747058587, -26.607971936214536)
folium_map = folium.Map(location=start_coords, zoom_start=3)

map_id = 'map_' + folium_map._id

circlemove_js = """\nfunction circlemove(e) {{ 
    var clickedCircle = e.target;
    clickedCircle;
    {0}.dragging.disable()
    {0}.on('mousemove', function (e) {{
         clickedCircle.setLatLng(e.latlng);
         }});
    }}; 
    {0}.on('mouseup', function(e) {{
        {0}.dragging.enable()
        {0}.removeEventListener('mousemove');
        }});""".format(map_id)

marker_options_js = """\n\nvar geojsonMarkerOptions = {
     radius:6,
     fillColor:'#172591',
     color:'#172591',
     weight:1, 
     opacity:1,
     fillOpacity:0.9 };\n\n"""

cm_name = 'mycirclemarker'
lat = start_coords[0]
lon = start_coords[1]
label = 'CM 1'
popup = 'Draggable circle marker'

cm_js = """\nvar {0} = L.circleMarker([{1}, {2}], \
    geojsonMarkerOptions).bindPopup('{4}').bindTooltip('{3}').on('mousedown', \
    circlemove).addTo({5})""".format(cm_name, lat, lon, label, popup, map_id)
    
e1 = Element(marker_options_js)
e2 = Element(circlemove_js)
cm_element = Element(cm_js)

html = folium_map.get_root()
html.script.get_root().render()
html.script._children[e1.get_name()] = e1
html.script._children[e2.get_name()] = e2
html.script._children[cm_element.get_name()] = cm_element

folium_map.save('cm_drag_test.html')