¿Cómo obtendré la selección de funciones de OpenLayers y JavaScript arrastrar y soltar trabajando juntos?

Question

Estoy escribiendo una aplicación que usa OpenLayers para permitir a los usuarios arrastrar y soltar archivos en un conjunto predefinido de características que se envían a un servidor con AJAX. Los archivos en sí son datos brutos de equipos geofísicos que el servidor representará como una capa ráster.

tengo de arrastrar y soltar que trabaja para el mapa:

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

Y tengo más destacado en vuelo estacionario trabajar con este código:

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

El resto del código es sobre todo solo el Boxes Example - Vector.

El problema es que al arrastrar un archivo al lienzo del mapa, la selección del elemento emergente OpenLayers ya no funciona, y me gustaría recibir los comentarios que le da al usuario para asegurarse de que están soltando el archivo donde lo esperan.

puedo conseguir la posición del cursor en el lienzo:

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

así que puede ser capaz de hacer una prueba de punto en función de esa función, pero sería agradable ser capaz de utilizar el funcionalidad existente.

¿Hay alguna manera de propagar el mensaje de arrastrar a mi capa OpenLayers?

Answer 1

De la documentación de arrastrar y soltar de MDN [1]: «Tenga en cuenta que solo se disparan los eventos de arrastre; eventos de mouse como mousemove no se activan durante una operación de arrastre. »

Así que no podrá registrar su controlador de arrastre en el mapa div. Tal vez podría intentar registrar un controlador de arrastre en cada característica. Aquí un código probado a medias (y solo con el renderizador SVG):

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