<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="text/javascript" src="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
var map = new L.Map('leaflet', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    })
  ]
});

function dragStartHandler (e) {
    var latlngs = polyline.getLatLngs(),
        latlng = this.getLatLng();
    for (var i = 0; i < latlngs.length; i++) {
        if (latlng.equals(latlngs[i])) {
            this.polylineLatlng = i;
        }
    }
}

function dragHandler (e) {
    var latlngs = polyline.getLatLngs(),
        latlng = this.getLatLng();
    latlngs.splice(this.polylineLatlng, 1, latlng);
    polyline.setLatLngs(latlngs);
}

function dragEndHandler (e) {
    delete this.polylineLatlng;
}

var a = new L.LatLng(-45, -90),
    b = new L.LatLng(45, 0),
    c = new L.LatLng(-45, 90);
    
    var marker_a = new L.Marker(a, {draggable: true}).addTo(map),
        marker_b = new L.Marker(b, {draggable: true}).addTo(map),
        marker_c = new L.Marker(c, {draggable: true}).addTo(map);
    
var polyline = new L.Polyline([a, b, c]).addTo(map);

marker_a
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_b
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);

marker_c
    .on('dragstart', dragStartHandler)
    .on('drag', dragHandler)
    .on('dragend', dragEndHandler);
body {
  margin: 0;
}

html, body, #leaflet {
  height: 100%;
}