title: marker with polyline while dragging the marker using leaflet
body: <p>Hi I have connection between marker with polyline like this Image .
  I am attaching a sample here.<a href="https://i.stack.imgur.com/fkGH1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fkGH1.png" alt="enter image description here"></a></p>
  
  <p>How Can I make drag possible that when I drag the the marker with polyline.</p>
  
  <p>example , If I drag the marker 3 it should also update the polyline point and where ever I put the marker 3 polyline should connect with marker 3.</p>
  
  <p>I need this type of drag event that can update the polyline also when dragging the marker.</p>
  
  <p>I am using leaflet for this purpose but still unable to solve the dragging logic of marker with polyline.</p>
  
  <p>Here is the sample code I am using</p>
  
  <pre><code>$http.get("db/getConnectionData.php").then(function (response) {
  
  
  $scope.links1 = response.data.records;
  
  
  // $scope.showArrow();
     angular.forEach($scope.links1, function(value, i) {
          var source_panoId = $scope.links1[i].s_panoId;
          var dest_panoId   = $scope.links1[i].d_panoId;
          var sPanoID      = $scope.links1[i].sourcePano_id;
          var dPpanoID     = $scope.links1[i].destPano_id;
  
  
            angular.forEach($scope.panoramas, function(value, index) {
                if($scope.panoramas[index].panoId == source_panoId){
                     if($scope.links.indexOf($scope.panoramas[index])== -1){
                           $scope.links.push($scope.panoramas[index]);
                       }
                      var SlatLang = $scope.panoramas[index].project_latLng ;
                      var SLatLngArr = SlatLang.split(",");
                      var Slat  = parseFloat(SLatLngArr[0]);
                      var Slang = parseFloat(SLatLngArr[1]);
                      var polypoint1 = [Slat, Slang];
  
                  angular.forEach($scope.panoramas, function(value, index1) {
                     if($scope.panoramas[index1].panoId == dest_panoId){         
                         if($scope.links.indexOf($scope.panoramas[index1])== -1){                                      
                              $scope.links.push($scope.panoramas[index1]);
                          }
                          var DlatLang = $scope.panoramas[index1].project_latLng ;
                          var DLatLngArr = DlatLang.split(",");
                          var Dlat  = parseFloat(DLatLngArr[0]);
                          var Dlang = parseFloat(DLatLngArr[1]);
                          var polypoint2 = [Dlat, Dlang];
  
                         // Draw seperate polyline for each connection
                          polyline = L.polyline([[Slat, Slang],[Dlat, Dlang]],
                                                {
                                                  color: 'blue',
                                                  weight: 5,
                                                  opacity: .7,
                                                }
                                                ).addTo(map);
  
                                      $scope.polycoords.push(polyline);
  
  
                                  }
  
                              });
  
  
                          }
  
                      });
  </code></pre>
  
  <p>Here is the code that I am using to make drag of marker with polyline</p>
  
  <p>angular.forEach($scope.panoramas, function(value, index4){</p>
  
  <p>$scope.markers[index4].on('dragstart', function(e){</p>
  
  <pre><code>            var latlngs = polyline.getLatLngs(),
                  latlng = $scope.markers[index4].getLatLng();
  
              for (var i = 0; i &lt; latlngs.length; i++) {
                  if (latlng.equals(latlngs[i])) {
                      this.polylineLatlng = i;
                  }
              }
  
  
  
          });//dragstart
  
          $scope.markers[index4].on('drag', function(e){
  
            var latlngs = polyline.getLatLngs(),
                latlng = $scope.markers[index4].getLatLng();
                latlngs.splice(this.polylineLatlng, 1, latlng);
                polyline.setLatLngs(latlngs);
          });//drag
  
          $scope.markers[index4].on('dragend', function(e){
            delete this.polylineLatlng;
          });//dragEnd
  
      });
  </code></pre>