перетаскивание с помощью листовки на мобильных устройствах - PullRequest
Новая
       6

перетаскивание с помощью листовки на мобильных устройствах

0 голосов
/ 22 декабря 2018

У меня есть карта с перетаскиваемыми маркерами.Когда вы нажимаете на маркер, я загружаю контент в div #overflow.Прокрутка отлично работает с колесом мыши на рабочем столе, но есть проблема при использовании перетаскивания на мобильных устройствах:

Сначала в #overflow не было никакой прокрутки, пока я не добавил if(map.tap) map.tap.disable() Прокрутка сейчасработает, но только когда мой палец находится на экране - нет плавной остаточной прокрутки, которая позволяет вам как-то щелкнуть окном вниз.Таким образом, прокрутка занимает очень много времени, потому что я должен вручную перетаскивать содержимое пальцем, а не перетаскивать его.Как сделать так, чтобы плавная прокрутка WEEEEEEE, похожая на щелчок, работала на мобильных устройствах и при этом оставалась перетаскиваемой меткой?

<div id=“overflow” style=“
 position: fixed; 
 left: 0; top: 0; 
 width: 100%; height !00%; 
 overflow: auto;”>
     a lot of content is loaded here when a marker is clicked on
</div>

Вот как я инициализирую карту: 

var map = L.map('map').setView([40,-70], 8);

token = ‘pk.my-token';

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+token, {
    maxZoom: 21,
    id: 'mapbox.light'
}).addTo(map);

data_url = ‘/fetch-addresses';

$.getJSON(data_url, function(data) {

    var addresses = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        layer.id = feature.properties.id;
        layer.on('dragend', function(e) {
            new_lat = e.target._latlng.lat;
            new_lng = e.target._latlng.lng;
            updateAddress("X", new_lat, layer.id);
            updateAddress("Y", new_lng, layer.id);
        });
      },
      pointToLayer: function (feature, latlng) {        
        return L.circleMarker(latlng, getStyles(feature.properties.status) );
      }
    });

    var clusters = new L.markerClusterGroup({ });
    clusters.addLayer(addresses);
    map.addLayer(clusters);

    clusters.on("click", function(evt) {
        map.dragging.disable();
        map.touchZoom.disable();
        map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();
        map.boxZoom.disable();
        map.keyboard.disable();
        if (map.tap) map.tap.disable();
        $(‘#overflow’).load(‘/load-overflow-content’, function({ });
    });
});

Я делаю маркеры перетаскиваемыми, используя плагин L.Path.Drag.js и устанавливая draggable: true в стиле маркера.

    function getStyles(status) {
         if (status === “SAMPLE") {
            return {
                radius: 11,
                weight: 1,
                opacity: 1,
                color: “blue",
                fillColor: “blue",
                fillOpacity: .25,
                draggable: true
            };
        }
     }
...