Désactiver le panoramique / glisser sur la carte du dépliant pour div dans la carte

25

Quelqu'un sait-il comment supprimer le panoramique lorsque vous cliquez et faites glisser sur le dessus d'une zone de div intégrée dans la carte elle-même?

Par exemple ici , lorsque vous cliquez sur la légende et que vous la faites glisser au-dessus de la légende, la carte traîne avec vous. Je veux supprimer cette fonction. Je sais si cette technique, mais je veux savoir si c'est la seule façon:

map.dragging.disable();
leaflet M. Concolato
la source
J'ai implémenté une fonctionnalité similaire en utilisant un écouteur jQuery .hover (en utilisant handlerIn et handlerOut pour désactiver et activer le glissement). Je ne sais pas si c'est une option pour vous: api.jquery.com/hover
evv_gis

Réponses:

20

En utilisant l'exemple du site Web de Leaflet, notez où l' L.Controlobjet est instancié comme info; il s'agit de la <div>boîte en haut à droite associée à l'interaction de survol de la carte. Voici où il est défini dans index.htmll'exemple Leaflet:

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

Pour désactiver le glissement lorsque le curseur d'un utilisateur est à l' intérieur de cette <div>boîte , ajouter un écouteur d'événement au HTMLElement(un <div>élément) qui contient l' L.Controlobjet:

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

Rappel qui a mapété défini L.Mapprécédemment comme l' instance.

Arthur
la source
Merci @Arthur, je connais bien cette approche. J'espérais que quelqu'un pourrait offrir une solution en utilisant css comme dans les événements de pointeur: auto ou événements de pointeur: aucun ou quelque chose comme ceux-là, qui ne fonctionnent pas tout à fait pour moi. Si personne d'autre ne poste une meilleure solution, je vous donnerai le chèque, car cela signifiera que c'est la meilleure solution.
M. Concolato
Je voudrais voir cela aussi. Ce serait bien si CSS pouvait résoudre ce problème, mais quel élément devrait avoir ses événements de pointeur gérés? L' leaflet-controlélément est contenu par l' leaflet-containerélément et ce dernier reçoit les événements de pointeur qui déclenchent le zoom et le panoramique.
Arthur
J'ai essayé de le mettre sur le div des intérêts en vain.
M. Concolato
Oui, et cela a du sens: l' <div>intérêt est un enfant leaflet-controldont lui-même est à l'intérieur leaflet-container. Les événements sont reçus par le parent ( leaflet-container) avant l'enfant ( leaflet-control).
Arthur
19

Une autre solution consiste à arrêter la propagation des événements avec JavaScript (comme c'est le cas pour les contrôles Leaflet, par exemple les boutons 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);
}
Ilja Zverev
la source