Deshabilitar el encuadre / arrastre en el mapa de folletos para div dentro del mapa

25

¿Alguien sabe cómo suprimir la panoramización al hacer clic y arrastrar sobre la parte superior de un cuadro div incrustado dentro del mapa?

Por ejemplo, aquí , cuando hace clic y arrastra sobre la parte superior de la leyenda, el mapa se arrastra con usted. Quiero suprimir esa función. Soy consciente de esta técnica, pero quiero saber si esta es la única manera:

map.dragging.disable();
    
pregunta Mr. Concolato 08.07.2014 - 19:57

2 respuestas

16

Utilizando el ejemplo del sitio web del Folleto, tenga en cuenta que el objeto L.Control se crea una instancia como info ; este es el cuadro <div> en la esquina superior derecha asociado con la interacción de desplazamiento del mapa. Aquí es donde se define en index.html del ejemplo de Folleto:

    // 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);

Para deshabilitar el arrastre cuando el cursor de un usuario está dentro de este cuadro <div> , agregue un detector de eventos al HTMLElement (un elemento <div> ) que contiene el objeto L.Control :

    // 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();
    });

Recuerde que map se definió como la instancia L.Map anteriormente.

    
respondido por el Arthur 09.07.2014 - 15:01
18

Una solución alternativa a eso es detener la propagación de eventos con JavaScript (como se hace con los controles de Folletos, por ejemplo, los botones de zoom):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
    
respondido por el Ilja Zverev 10.07.2014 - 15:40

Lea otras preguntas en las etiquetas