Leaflet手动创建的bounding box无法拖拽如何解决

输入经纬度（lat/lon）后触发绘制生成的bounding box无法拖拽，只有从地图自带菜单选择矩形绘制工具生成的bounding box才支持拖拽，需要实现手动经纬度创建的bounding box支持拖拽功能。
原有实现代码如下：

function drawRectangle()
{
var lat_lon_array = [];
var north = document.getElementById("north").value;
var west = document.getElementById("west").value;
var east = document.getElementById("east").value;
var south = document.getElementById("south").value;
var lat_lon = [[north,east],[south,west]];
var rectangle = L.rectangle(lat_lon);
rectangle.addTo(map);
map.fitBounds(rectangle.getBounds());
}

你通过L.rectangle手动创建的是Leaflet原生矩形矢量图层，默认不带拖拽、编辑交互能力。而地图自带绘制菜单生成的矩形，是由Leaflet.draw这类编辑插件创建的，初始化时就自动绑定了插件提供的拖拽、顶点编辑逻辑，所以支持拖拽调整。

根据当前项目依赖选择对应方案即可：

• 若项目已经引入Leaflet.draw（也就是地图自带绘制菜单依赖的插件），不需要额外加其他库，只要把手动创建的矩形加入插件托管的可编辑要素组就行，修改后的代码：

function drawRectangle()
{
  var north = document.getElementById("north").value;
  var west = document.getElementById("west").value;
  var east = document.getElementById("east").value;
  var south = document.getElementById("south").value;
  var lat_lon = [[north,east],[south,west]];
  var rectangle = L.rectangle(lat_lon);
  // 核心：将矩形加入draw插件的可编辑要素图层组，自动获得和工具绘制矩形一致的拖拽、编辑能力
  drawnItems.addLayer(rectangle);
  map.fitBounds(rectangle.getBounds());
}

注：drawnItems是初始化Leaflet.draw时创建的L.FeatureGroup()实例，用于存放所有用户绘制的可编辑要素，如果代码里给这个实例起了别的变量名，替换成对应名称即可。

• 若项目没有引入Leaflet.draw，仅需要给矩形加拖拽能力，可以引入Leaflet.Path.Drag插件，创建矩形时开启拖拽配置：

// 引入插件后初始化矩形时增加draggable配置
var rectangle = L.rectangle(lat_lon, {
  draggable: true
});
rectangle.addTo(map);

提示：如果还需要支持拖拽顶点调整矩形大小，优先选第一种对接现有Leaflet.draw的方案，交互和现有工具生成的矩形完全一致，不需要额外写逻辑。

内容的提问来源于stack exchange，提问作者user3525290