Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <title>EsriJS Drag & Drop</title>
</head>
<body>
  <div id="mapView"></div>
  <div id="iconArea">
  <img id="home"
name="home"
class="drag-icon padding-icon-text"
src="http://www.odoe.net/apps/dndeditdemo/img/home_icon.png"
draggable="true" data-id="home" />
<img id="weather"
name="home"
class="drag-icon padding-icon-text"
src="http://www.odoe.net/apps/dndeditdemo/img/weather_station.png"
draggable="true" data-id="weather" />
  </div>
  <script src="http://js.arcgis.com/3.13/"></script>
</body>
</html>
 
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;
          var y = e.clientY - position.y;
          self.emit('itemdrop', {
            bubbles: true,
            cancelable: true,
            dragsource: src,
            x:x,
            y:y
          });
        }));
      }));
    }
  });
  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);
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
odoepro
0viewers