JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<div id="map"></div>

CSS

#map{
    width: 300px;
    height: 300px;
    
}

JavaScript

L.Draggable.prototype._freeze=false;
L.Draggable.prototype._updatePosition= function () {
    if(this._freeze) {
        return;
    }
    
    this.fire('predrag');
    L.DomUtil.setPosition(this._element, this._newPos);
    this.fire('drag');
};

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.on('mouseout', function() {
    map.dragging._draggable._freeze=true; 
});
map.on('mouseover', function() {
    map.dragging._draggable._freeze=false; 
});