title: Draggable icon on OpenLayers map
body: <p>I want to create a draggable icon on OpenLayers maps for locations.</p>
  
  <p>With the code below, I can put an icon (using a PNG image) on the map, but it is not draggable.  How can I achieve that?</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="mapdiv"&gt;&lt;/div&gt;
    &lt;script src="http://www.openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;
    &lt;script&gt;
          map = new OpenLayers.Map("mapdiv");
          map.addLayer(new OpenLayers.Layer.OSM());
  
          var lonLat = new OpenLayers.LonLat( 72.91152, 19.11186 )
            .transform(
              new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
              map.getProjectionObject() // to Spherical Mercator Projection
            );
  
          var zoom=16;
          var osm = new OpenLayers.Layer.OSM();
          var vectors = new OpenLayers.Layer.Vector("Vector Layer");
          map.addLayers([osm, vectors]);
  
          var markers = new OpenLayers.Layer.Markers( "Markers" );
          map.addLayer(markers);
  
          var size = new OpenLayers.Size(25,37);
          var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
          mymarker = new OpenLayers.Icon('marker-icon.png', size, offset);
          markers.addMarker(new OpenLayers.Marker(lonLat, mymarker));
  
      var point = new OpenLayers.Geometry.Point(lonLat.lon,lonLat.lat);
      vectors.addFeatures([new OpenLayers.Feature.Vector(point)]);
      drag = new OpenLayers.Control.DragFeature(vectors, {autoActivate: true});
      map.addControl(drag);
      map.setCenter (lonLat, zoom);
      &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>