Leaflet Disable Panning – How to Disable Panning and Dragging for Div Within Map

leaflet

Does anyone know how to suppress panning when you click and drag over top of a div box embedded within the map itself?

For example here, when you click and drag over top of the legend, the map drags with you. I want to suppress that function.
I am aware if this technique, but i want to know if this is the only way:

map.dragging.disable();

Best Answer

Using the example from the Leaflet website, note where the L.Control object is instantiated as info; this is the <div> box in the upper-right associated with the map's hover interaction. Here is where it is defined in index.html from the Leaflet example:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

To disable the dragging when a user's cursor is inside this <div> box, add an event listener to the HTMLElement (a <div> element) that contains the L.Control object:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

Recall that map was defined as the L.Map instance earlier.

Related Question