imagery - Making Leaflet image overlay draggable?

I simply want to make a georeferenced imageOverlay draggable in leaflet. I found several unanswered posts (e.g. here and here).

Since it is easy to make markers draggable, someone tried to adapt the code for imageOverlay here. The issue was closed and refered to the interactive option for events on imageOverlays.

According to the last two links, it shouldn't be so difficult but I have no idea how to do it - do you?

Answer

A simple workaround is to bind the imageOverlay to a draggable Polygon (thanks to w8r for this idea, developer of Leaflet.Path.Drag)

 var poly1 = [
    [40.71222, -74.22655],

    [40.77394, -74.22655],
    [40.77394, -74.12544],
    [40.71222, -74.12544]
 ];
 var pg = new L.Polygon([poly1],{
       draggable: true,
       opacity: 0,
       fillOpacity: 0
    }).addTo(map);  


 var imageBounds = L.latLngBounds([
    poly1[0],
    poly1[2]
 ]);
 map.fitBounds(imageBounds);
 var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds, {
    opacity: 0.7,
    interactive: true
 });
 map.addLayer(overlay);


 pg.on('drag, dragend', function (e) {
    overlay.setBounds(pg.getBounds());
 });

https://jsfiddle.net/freeze2000f/e2co5jv0/