How would I get OpenLayers feature selection and Javascript drag and drop working together?

Question

I am writing an application that uses OpenLayers to enable users to drag and drop files on to a pre-defined set of features that get sent to a server with AJAX. The files themselves are raw data from geophysics equipment that will be rendered as a raster layer by the server.

I have drag-and-drop working for the map:

var mapelem = $id("map");
mapelem.addEventListener("dragover", FileDragHover, false);
mapelem.addEventListener("dragleave", FileDragHover, false);
mapelem.addEventListener("drop", FileSelectHandler, false);

And I have highlight on hover working with this code:

var sf = new OpenLayers.Control.SelectFeature(boxes, {
    hover: true,
    multiple: false,
    highlightOnly: true
});
map.addControl(sf);
sf.activate();

The rest of the code is mostly just the Boxes Example - Vector.

The problem is that when dragging a file onto the map canvas, the OpenLayers hover selection no longer works, and I would like the feedback it gives the user to ensure they're dropping the file where they expect it.

I can get the cursor's position on the canvas:

map.events.register("mousemove", map, function(e) { 
    lonlat = map.getLonLatFromPixel(e.xy);
});

So I may be able to do a point-in-feature test in that function, but it would be nice to be able to use the existing functionality.

Is there some way I can propagate the drag message to my OpenLayers layer?

score 3 · Accepted Answer · answered Jul 19 '12 at 08:44

From the MDN drag and drop documentation [1]: «Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.»

So you won't be able to register your drag handler to the map div. Maybe you could try to register a drag handler on each feature. Here some half-tested code (and just with the SVG renderer):

boxes.features.forEach(function(f){
    elem = $(f.geometry.id);
    elem.addEventListener("dragover", FileDragHover, false);
    elem.addEventListener("dragleave", FileDragHover, false);
    elem.addEventListener("drop", FileSelectHandler, false);
})

Hope that can helps.

1 - https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

then you should be able to programmatically select the feature in your handler. — tonio, Jul 19 '12 at 08:45

How would I get OpenLayers feature selection and Javascript drag and drop working together?

1 Answers1