yohanboniface/Path.Drag.js

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Path.Drag.js demo</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
    <script src="./src/Path.Drag.js"></script>
    <style type="text/css">
        .my-div-icon {
            background-color: goldenrod;
            text-align: center;
        }
        body,
        html,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%
        }

    </style>
</head>
<body>

    <div id="map"></div>


    <script type="text/javascript">
        var center = [41.2058, 9.4307];

        var map = L.map('map', {preferCanvas: true}).setView(center, 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        // var geojson = L.geoJson(null, {onEachFeature: function (feature, layer) {
        //     layer.on('add', function () {
        //         var dragging = new L.Handler.PathDrag(layer);
        //         dragging.enable()
        //     })
        // }}).addTo(map);
        // geojson.addData(russia);
        // Russia comes from https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson

        L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]], {draggable: true}).addTo(map);
        L.polygon([[[41.20, 9.41], [41.20, 9.39], [41.21, 9.41]], [[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]], {color: 'Tomato',draggable: true}).addTo(map);
        L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12, draggable: true}).addTo(map);
        L.polyline([[41.20, 9.36], [41.205, 9.35], [41.19, 9.34]], {draggable: true}).addTo(map);

    </script>
</body>
</html>

## Path.Drag.js
/* A Draggable that does not update the element position
   and takes care of only bubbling targetted path in Canvas mode. */
L.PathDraggable = L.Draggable.extend({

  initialize: function (path) {
    this._path = path;
    this._canvas = (path._map.getRenderer(path) instanceof L.Canvas);
    var element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path;
    L.Draggable.prototype.initialize.call(this, element, element, true)
    L.DomUtil.addClass(element, 'leaflet-path-draggable');
  },

  _updatePosition: function () {
    var e = {originalEvent: this._lastEvent};
    this.fire('drag', e);
  },

  _onDown: function (e) {
    var first = e.touches ? e.touches[0] : e;
    this._startPoint = new L.Point(first.clientX, first.clientY);
    if (this._canvas && !this._path._containsPoint(this._startPoint)) return;
    L.Draggable.prototype._onDown.call(this, e);
  }

})


L.Handler.PathDrag = L.Handler.extend({

  initialize: function (path) {
    this._path = path;
  },

  getEvents: function () {
    return {
      dragstart: this._onDragStart,
      drag: this._onDrag,
      dragend: this._onDragEnd
    };
  },

  addHooks: function () {
    if (!this._draggable) this._draggable = new L.PathDraggable(this._path);
    this._draggable.on(this.getEvents(), this).enable();
  },

  removeHooks: function () {
    this._draggable.off(this.getEvents(), this).disable();
    L.DomUtil.removeClass(this._path._path, 'leaflet-path-draggable');
  },

  moved: function () {
    return this._draggable && this._draggable._moved;
  },

  _onDragStart: function (e) {
    this._startPoint = this._draggable._startPoint;
    this._path
        .closePopup()
        .fire('movestart')
        .fire('dragstart');
  },

  _onDrag: function (e) {
    var path = this._path,
        event = (e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent),
        newPoint = L.point(event.clientX, event.clientY),
        latlng = path._map.layerPointToLatLng(newPoint);

    this._offset = newPoint.subtract(this._startPoint);
    this._startPoint = newPoint;

    this._path.eachLatLng(this.updateLatLng, this);
    path.redraw();

    e.latlng = latlng;
    e.offset = this._offset;
    path.fire('move', e)
        .fire('drag', e);
  },

  _onDragEnd: function (e) {
    this._path.fire('moveend')
              .fire('dragend', e);
  },

  updateLatLng: function (latlng) {
    var oldPoint = this._path._map.latLngToLayerPoint(latlng);
    oldPoint._add(this._offset);
    var newLatLng = this._path._map.layerPointToLatLng(oldPoint);
    latlng.lat = newLatLng.lat;
    latlng.lng = newLatLng.lng;
  }

});

L.Path.include({

    eachLatLng: function (callback, context) {
      context = context || this;
      var loop = function (latlngs) {
        for (var i = 0; i < latlngs.length; i++) {
          if (L.Util.isArray(latlngs[i])) loop(latlngs[i]);
          else callback.call(context, latlngs[i])
        }
      }
      loop(this.getLatLngs ? this.getLatLngs() : [this.getLatLng()]);
    }

});

L.Path.addInitHook(function () {

  if (this.options.draggable) {
    this._dragging = new L.Handler.PathDrag(this);
    this.once('add', function () {
      this._dragging.enable()
    });
  }

})
	<!DOCTYPE html>
	<html>
	<head>
	<title>Path.Drag.js demo</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
	<script src="./src/Path.Drag.js"></script>
	<style type="text/css">
	.my-div-icon {
	background-color: goldenrod;
	text-align: center;
	}
	body,
	html,
	#map {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%
	}

	</style>
	</head>
	<body>

	<div id="map"></div>


	<script type="text/javascript">
	var center = [41.2058, 9.4307];

	var map = L.map('map', {preferCanvas: true}).setView(center, 13);

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);


	// var geojson = L.geoJson(null, {onEachFeature: function (feature, layer) {
	// layer.on('add', function () {
	// var dragging = new L.Handler.PathDrag(layer);
	// dragging.enable()
	// })
	// }}).addTo(map);
	// geojson.addData(russia);
	// Russia comes from https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson

	L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]], {draggable: true}).addTo(map);
	L.polygon([[[41.20, 9.41], [41.20, 9.39], [41.21, 9.41]], [[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]], {color: 'Tomato',draggable: true}).addTo(map);
	L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12, draggable: true}).addTo(map);
	L.polyline([[41.20, 9.36], [41.205, 9.35], [41.19, 9.34]], {draggable: true}).addTo(map);

	</script>
	</body>
	</html>
	/* A Draggable that does not update the element position
	and takes care of only bubbling targetted path in Canvas mode. */
	L.PathDraggable = L.Draggable.extend({

	initialize: function (path) {
	this._path = path;
	this._canvas = (path._map.getRenderer(path) instanceof L.Canvas);
	var element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path;
	L.Draggable.prototype.initialize.call(this, element, element, true)
	L.DomUtil.addClass(element, 'leaflet-path-draggable');
	},

	_updatePosition: function () {
	var e = {originalEvent: this._lastEvent};
	this.fire('drag', e);
	},

	_onDown: function (e) {
	var first = e.touches ? e.touches[0] : e;
	this._startPoint = new L.Point(first.clientX, first.clientY);
	if (this._canvas && !this._path._containsPoint(this._startPoint)) return;
	L.Draggable.prototype._onDown.call(this, e);
	}

	})


	L.Handler.PathDrag = L.Handler.extend({

	initialize: function (path) {
	this._path = path;
	},

	getEvents: function () {
	return {
	dragstart: this._onDragStart,
	drag: this._onDrag,
	dragend: this._onDragEnd
	};
	},

	addHooks: function () {
	if (!this._draggable) this._draggable = new L.PathDraggable(this._path);
	this._draggable.on(this.getEvents(), this).enable();
	},

	removeHooks: function () {
	this._draggable.off(this.getEvents(), this).disable();
	L.DomUtil.removeClass(this._path._path, 'leaflet-path-draggable');
	},

	moved: function () {
	return this._draggable && this._draggable._moved;
	},

	_onDragStart: function (e) {
	this._startPoint = this._draggable._startPoint;
	this._path
	.closePopup()
	.fire('movestart')
	.fire('dragstart');
	},

	_onDrag: function (e) {
	var path = this._path,
	event = (e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent),
	newPoint = L.point(event.clientX, event.clientY),
	latlng = path._map.layerPointToLatLng(newPoint);

	this._offset = newPoint.subtract(this._startPoint);
	this._startPoint = newPoint;

	this._path.eachLatLng(this.updateLatLng, this);
	path.redraw();

	e.latlng = latlng;
	e.offset = this._offset;
	path.fire('move', e)
	.fire('drag', e);
	},

	_onDragEnd: function (e) {
	this._path.fire('moveend')
	.fire('dragend', e);
	},

	updateLatLng: function (latlng) {
	var oldPoint = this._path._map.latLngToLayerPoint(latlng);
	oldPoint._add(this._offset);
	var newLatLng = this._path._map.layerPointToLatLng(oldPoint);
	latlng.lat = newLatLng.lat;
	latlng.lng = newLatLng.lng;
	}

	});

	L.Path.include({

	eachLatLng: function (callback, context) {
	context = context \|\| this;
	var loop = function (latlngs) {
	for (var i = 0; i < latlngs.length; i++) {
	if (L.Util.isArray(latlngs[i])) loop(latlngs[i]);
	else callback.call(context, latlngs[i])
	}
	}
	loop(this.getLatLngs ? this.getLatLngs() : [this.getLatLng()]);
	}

	});

	L.Path.addInitHook(function () {

	if (this.options.draggable) {
	this._dragging = new L.Handler.PathDrag(this);
	this.once('add', function () {
	this._dragging.enable()
	});
	}

	})