Drag & drop something from outside the map onto a feature (openlayers)?

Question

I'm developing a website with openlayers where the user should be able to drag the name of a building from a list of buildings(outside the map) onto a feature on the map.

Since I have found no way to do this with openlayers I thought about doing this by using the interact.js framework. My plan is to select the features by mouse hover so when the user drops something and releases the mouse button then the feature is already selected.

Is it possible to drag something from outside the map onto a feature with openlayers?

If not, have you a better suggestion how to do it like described above?

Answer 1

I found a solution by using the HTML5 drag&drop feature in order to drag a HTML element from outside the map to a polygon on a vector layer. It looks a bit dirty but it works perfectly.

Here is the HTML code with a list of droppable elements and the map:

<ul class="list-group">
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 1</li>
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 2</li>
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 3</li>
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 4</li>
<li draggable="true" ondragstart="dragStart(event)" style="cursor: move">Area 5</li>
</ul>
<div id="map" class="map" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

In order to detect the feature on which the element was dropped I used a select interaction that selects a feature on mouse hover. And here is the JavaScript code that handles the drop event and finds the target feature:

var lastDropLocation = {};

function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault();
    lastDropLocation["x"] = ev.pageX;
    lastDropLocation["y"] = ev.pageY;
}


selectInteraction.on('select', function (e) {
    if (e.selected.length == 1) {
        var browserEvent = e.mapBrowserEvent.browserEvent;
        // Check if the drop location is the same as the location where the feature was selected
        if (lastDropLocation.x == browserEvent.clientX && lastDropLocation.y == browserEvent.clientY) {
            // Area was dragged to a polygon ...
            var feature = e.selected[0];
            // Further code here...
        }
    }
});

Answer 2

One idea would be to create an overlay (see also this example) for each building, which contains a div that acts as a "dropzone" for interact.js.

var dropZone = new ol.Overlay({
  position: [0, 0],
  positioning: 'center-center',
  element: document.getElementById('inner-dropzone'),
  stopEvent: false
});
map.addOverlay(dropZone);

I quickly made a simple proof-of-concept by copying the drag&drop example by interact.js: http://jsfiddle.net/96gao5nu/2/

Answer 3

I would use ol.control.MousePosition to get the mouse position once something is dropped to the map. Then use the mouse position to get the feature you would like to interact with.