Draggable Popup Items using Leaflet and Dragula

Question

I'm using Dragula for dragging and dropping items all over an application I'm using. Dynamically added draggable items are working everywhere except in a Leaflet map popup and I can't figure out why.

Here's a slim example of what I would like to work; My popup would pull in dynamic content and the items in the popup would be able to be dragged to somewhere outside of the map.

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/

How can I get "Item 1" and "Item 2" from the popup to drag?

Edit: Updated the fiddle to demonstrate functioning Dragula instance. You can drag items into the popup, but not out of it. This seems to have something to do with Leaflet restricting DOM events.

Draggable Popup Items using Leaflet and Dragula

0 Answers0