title: Leaflet v1.03: Make CircleMarker draggable?
body: <p>does some Leaflet guru has an idea, what's the easiest way to make a <strong>CircleMarker</strong> draggable in <strong>Leaflet v1.0.3</strong>?</p>
  
  <p>It's easy to do it for "standard" markers by using the <em>"draggable"</em>-option. But such an option doesn't exist for CircleMarker. I tried it by using several Events, but the problem is, that not the marker is being moved but the underlying map.</p>
  
  <p>Another possibility could be the use of <em>"stopPropagation"</em>-Function (but just for DOMEvents). Or the use of <em>"removeEventParent"</em>... if the "parent" of the CircleMarker is the map and its events?
  Regarding to the Documentation there also <em>DOMUtility/Draggable</em>-class. Is this what I need?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Draggable Markers&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /&gt;
    &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body {padding: 0; margin: 0;}
              html, body, #map {height: 100%;}
        &lt;/style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script&gt;
              var layerOsm = new L.TileLayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHBldGUiLCJhIjoiY2lsdmE2ZmQ2MDA4OHZxbTZpcmx1emtqbSJ9.Two7SPSaIZysqgOTrrLkRg', {
             subdomains: 'ab', maxZoom: 20, noWrap:true, attribution:'&lt;a href="http://www.mapbox.com"&gt;Mapbox&lt;/a&gt; | &lt;a href="http://www.openstreetmap.org/copyright/"&gt;OpenStreetMap&lt;/a&gt;' });
     var map = new L.Map('map').addLayer(layerOsm).setView(new L.LatLng(47.8, 13.0), 14);
              L.marker([47.8, 13.0], {draggable:true}).addTo(map);
              
              var circle = L.circleMarker([47.81, 13.01], {radius:30}).addTo(map);
  
              circle.on('mousedown', function () {
                  map.on('mousemove', function (e) {
                      circle.setLatLng(e.latlng);
                  });
              }); 
              map.on('mouseup', function(){
                  map.removeEventListener('mousemove');
              })
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>