Using leaflet.FreeDraw with leaflet.path.drag

Question

I am wondering if it's possible to use Leaflet.FreeDraw with leaflet.path.drag to be able to drag the polygon created by FreeDraw plugin.

jsfiddle

I tried to enable dragging plugin like this, but it doesn't work.

const map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);

freeDraw.dragging.enable();

Answer 1

You could extract the bounds from the FreeDraw by listening to the markers event to create a polygon or other map object using leaflet enabled with dragging. See working example below.

You should consider whether you would like to disable the FreeDraw after this, using the option leaveModeAfterCreate:true as the user may get additional polygons when dragging

const LAT_LNG = [51.505, -0.09];
const TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png';

const map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
const freeDraw = new FreeDraw({ 
mode: FreeDraw.ALL,
leaveModeAfterCreate:true //recommended to prevent undesired creation of multiple polygons
});
map.addLayer(freeDraw);

//freeDraw.dragging.enable();

//STEP 1: Listen to markers event raised by free draw whenever edits (create/edit/deletions are made to the map)
freeDraw.on("markers",function(event){
  //we are only interested in create events
  //we aim to extract the bounds and remove the existing
  //  freedraw references. If it is that you would like your
  //  user to edit the polygon, then you may keep these and do the   //  additional work to manage and update these references
  if(event.eventType=='create' && event.latLngs.length > 0){ 
  
     //capture the current polygon bounds (store in 1st position)
     var latLngs = event.latLngs[0];
     freeDraw.clear(); //clear freedraw markers
     //create polygon from lat lng bounds retrieved
     var polygon = L.polygon(
         latLngs.map(function(latLng){
             return [latLng.lat,latLng.lng];
         }), {
            color: 'red',
            draggable: true //make polygon draggable
         }).addTo(map);
     
  
  }
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.map {
  width: 100vw;
  height: 100vh;
}

.map.mode-create {
    cursor: crosshair;
}

.leaflet-edge {
    background-color: #95bc59;
    box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, .35);
    border-radius: 50%;
    cursor: move;
    outline: none;
    transition: background-color .25s;
}

.leaflet-polygon {
    fill: #b4cd8a;
    stroke: #50622b;
    stroke-width: 2;
    fill-opacity: .75;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet-src.js"></script>


<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>
<section class="map"></section>

NB. Also see working example on js-fiddle here https://jsfiddle.net/ytevLbgs/