popup - 可拖动的传单弹出窗口

Question

所以我现在向传单多边形添加了一个弹出窗口，并添加了显示和隐藏 onClick。现在我需要的是当单击并显示弹出窗口时，我希望弹出窗口甚至可以拖动到传单层之外。

解决方案不必完全依赖传单，我只是在单击图层时创建一个可拖动的弹出窗口，我已经尝试将 jQuery ui-draggable 添加到传单弹出窗口，但它似乎不起作用。

标签： popupleaflet

Answer 1

我有一个类似的问题并使用了解决方案https://plnkr.co/edit/S1GPRm6sNwGDkD6oSCHs?p=preview&preview链接在这里https://github.com/Leaflet/Leaflet/issues/5982

但是，它不允许您将弹出窗口拖出地图。

function makeDraggable(popup){
      var pos = map.latLngToLayerPoint(popup.getLatLng());
      L.DomUtil.setPosition(popup._wrapper.parentNode, pos);
      var draggable = new L.Draggable(popup._container, popup._wrapper);
      draggable.enable();
      
      draggable.on('dragend', function() {
        var pos = map.layerPointToLatLng(this._newPos);
        popup.setLatLng(pos);
      });
    }

map.on('click', function(event) {
         var popup = L.popup()
        .setLatLng(event.latlng)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);

        makeDraggable(popup);
      });
    });