CoffeeScript<\/A> naquela época, então o código pode não ser o mais fácil de ler.<\/P><\/P>
Então, como você poderia realizar algo assim? Vamos conferir uma solução.<\/P>
require([
"dojo\/_base\/_declare",
"esri\/map",
"dojo\/Evented",
"dojo\/dom",
"dojo\/dom-geometry",
"dojo\/dom-attr",
"dojo\/on",
"dojo\/query",
"esri\/geometry\/ScreenPoint",
"esri\/geometry\/screenUtils",
"esri\/symbols\/PictureMarkerSymbol",
"esri\/graphic"
], function(declare, Map, Evented, dom, domGeom, domAttr, on, query, ScreenPoint, screenUtils, PictureMarkerSymbol, Graphic) {
var cleanup = function(targets) {
targets.map(function(x) {
x.remove();
});
};
var DragDropHandler = declare([Evented], {
dragdrop: function(srcName, targetName) {
var src = dom.byId(srcName);
var target = dom.byId(targetName);
var handlers = [];
var self = this;
handlers.push(on(target, 'dragenter', function(e) {e.preventDefault();}));
handlers.push(on(target, 'dragover', function(e) {e.preventDefault();}));
handlers.push(on(target, 'dragend', function(e) {cleanup(handlers);}));
handlers.push(on(src, 'dragstart', function() {
handlers.push(on(target, 'drop', function(e) {
e.preventDefault();
cleanup(handlers);
var position = domGeom.position(e.currentTarget);
var x = e.clientX - position.x; \/\/- caso o mapa não ocupe a página inteira
 .&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.; var y = e.clientY - position.y;// caso o mapa não ocupe a página inteira
. &nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.&nbps.; self.emit('itemdrop', {
. &nbps.&nbps.&nbps.&nbps.&nbps.&nbps.; bubbles: true,
&. &. &. &. &. &. &. &. &. &. &. &. &. &. &. &. &. &. cancelable: true,
&. &. &. &. &. &. &. &. &. dragsource: src,
&. &. &. &. &. &. &. &. &. x:x,
&. &. &. &. &. &. &. &. y:y
& nbsp;. });
& nbsp;. }));
& nbsp;. }));
& nbsp;. }
});
var handler = new DragDropHandler();
var map = new Map("mapView", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
function addPoint(data) {
var mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt);
var pms = new PictureMarkerSymbol(data.url, 24, 24);
var graphic = new Graphic(mp, pms);
map.graphics.add(graphic);
}
on(query('.drag-icon'), 'mousedown', function(e) {
var srcName = domAttr.get(e.currentTarget, 'id');
handler.dragdrop(srcName, 'mapView');
});
on(handler, 'itemdrop', function(e) {
var data = {
pt: new ScreenPoint(e.x, e.y),
url: domAttr.get(e.dragsource, 'src')
};
addPoint(data);
});
});<\/PRE><\/P>Isso não é realmente muito código. O motor principal é realmente o DragDropHandler<\/STRONG>. Este DragDropHandler<\/STRONG> tem um método dragdrop<\/EM> que vai escutar eventos de arrastar em uma imagem e vê quando a imagem é solta no mapa. Quando essa imagem é solta no mapa, você só precisa emitir um evento com as coordenadas da tela e qual foi o item arrastado. A ArcGIS JS API fornece algumas utilidades para você converter coordenadas de tela em geometrias do mapa e voila<\/STRONG><\/EM>, você pode rapidamente adicionar gráficos ao mapa e até copiar o src da imagem para exibi-la no mapa!<\/P><\/P>
