Question

我正在使用Dragula来拖放我正在使用的应用程序上的项目。除Leaflet地图弹出窗口外，动态添加的可拖动项目无处不在，我无法弄清楚原因。

这是我想要工作的一个很好的例子;我的弹出窗口会提取动态内容，弹出窗口中的项目可以拖动到地图之外的某个位置。

var drake = dragula([$(".misc").get(0)]),
    map = L.map('map').setView([36.305165, 137.944336], 6);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
L.Icon.Default.imagePath = 'http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/images';

map.on("click", function(e) {
    map.closePopup();
    var content = '<h3>Items</h3><div class="map__items" id="mapitems"><div class="map__items_item">Item 1</div><div class="map__items_item">Item 2</div></div>';
    var popup = L.popup()
        .setLatLng(e.latlng)
        .setContent(content)
        .openOn(map);
  drake.containers.push($('#mapitems').get(0));
});

http://jsfiddle.net/d2pkmfcj/

如何从弹出窗口中获取“第1项”和“第2项”以进行拖动？

编辑：更新了小提琴以演示正常运行的Dragula实例。您可以将项目拖动到弹出窗口中，但不能将其拖出。这似乎与Leaflet限制DOM事件有关。

使用Leaflet和Dragula的可拖动弹出项目

0 个答案: