CoffeeScript<\/A> vertieft, daher ist der Code möglicherweise nicht der leichteste zu lesen.<\/P><\/P>
Wie könnten Sie so etwas also erreichen? Schauen wir uns eine Lösung an.<\/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; \/\/- falls die Karte nicht die ganze Seite einnimmt
var y = e.clientY - position.y;// falls die Karte nicht die ganze Seite einnimmt
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. self.emit('itemdrop', {
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. bubbles: true,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. cancelable: true,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. dragsource: src,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. x:x,
 .& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp. y:y
. & nbsp.; & nbsp.; & nbsp.; & nbsp.; & nbsp.; & nbsp.; & nbsp.; & nbsp.; });
& nbsp.; & nbsp.; & nbsp.; }));
& nbsp.; & nbsp.; }));
& nbsp.; }
});
& nbsp.; var handler = new DragDropHandler();
& nbsp.; var map = new Map("mapView", {
& nbsp.; center: [-118, 34.5],
& nbsp.; zoom: 8,
& nbsp.; basemap: "topo"
});
function addPoint(data) {
& nbsp.; var mp = screenUtils.toMapGeometry(map.extent, map.width, map.height, data.pt);
& nbsp.; var pms = new PictureMarkerSymbol(data.url, 24, 24);
& nbsp.; var graphic = new Graphic(mp, pms);
& nbsp.; map.graphics.add(graphic);
}
on(query('.drag-icon'), 'mousedown', function(e) {
& nbsp.; var srcName = domAttr.get(e.currentTarget, 'id');
& nbsp.; handler.dragdrop(srcName, 'mapView');
});
on(handler, 'itemdrop', function(e) {
& nbsp.; var data = {
& nbsp.; pt: new ScreenPoint(e.x, e.y),
& nbsp.; url: domAttr.get(e.dragsource, 'src')
};
addPoint(data);
});
});<\/PRE><\/P>Das ist wirklich nicht viel Code. Die treibende Kraft ist wirklich der DragDropHandler<\/STRONG>. Dieser DragDropHandler<\/STRONG> hat eine dragdrop<\/EM>-Methode, die auf Drag-Ereignisse bei einem Bild hört und erkennt, wenn das Bild auf der Karte abgelegt wird. Wenn dieses Bild auf der Karte abgelegt wird, müssen Sie nur ein Ereignis mit Bildschirmkoordinaten und dem gezogenen Element auslösen. Die ArcGIS JS API stellt einige Hilfsmittel zur Verfügung, um Bildschirmkoordinaten in Kartengeometrien umzuwandeln und voila<\/STRONG><\/EM>, Sie können schnell Grafiken zur Karte hinzufügen und sogar die Bildquelle kopieren, um sie auf der Karte anzuzeigen!<\/P><\/P>
