Jak mogę uzyskać wybór funkcji OpenLayers oraz funkcję przeciągania i upuszczania JavaScript?

Question

Piszę aplikację, która używa OpenLayers, aby umożliwić użytkownikom przeciąganie i upuszczanie plików do predefiniowanego zestawu funkcji, które są wysyłane do serwera za pomocą AJAX. Same pliki są surowymi danymi z urządzeń geofizycznych, które będą renderowane przez serwer jako warstwa rastrowa.

mam drag-and-drop obrotowego na mapie:

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

I mam podświetlenia przy aktywowaniu pracy z tym kodem:

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

Reszta kodu jest głównie tylko Boxes Example - Vector.

Problem polega na tym, że podczas przeciągania pliku na obszar roboczy mapy, wybór kursora OpenLayers nie działa i chciałbym uzyskać informację zwrotną, która zapewnia użytkownikowi, że upuszcza plik tam, gdzie go oczekują.

mogę uzyskać pozycję kursora na płótnie:

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

Więc będę mógł zrobić test punktu w funkcji w tej funkcji, ale byłoby miło, aby móc korzystać z istniejąca funkcjonalność.

Czy istnieje sposób, w jaki mogę propagować komunikat przeciągania do mojej warstwy OpenLayers?

Answer 1

Z dokumentacji przeciągnij i upuść MDN [1]: «Zauważ, że tylko zdarzenia przeciągania są uruchamiane; zdarzenia myszy, takie jak mousemove, nie są uruchamiane podczas operacji przeciągania. "

Nie można zarejestrować narzędzia przeciągania na mapie div. Być może mógłbyś spróbować zarejestrować program obsługi przeciągania dla każdej funkcji. Oto kilka na wpół przetestowany kod (i tylko z renderem 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); 
}) 

Nadzieję, że może pomóc.

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