How to move popup div along with marker in leaflet - css

Question

I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message.
I have the code:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
So the div appears in the location where I clicked i.e. at the location of the marker.
Now if I drag the map the markers move along with the map but the div remains at the same location.
How can I change the style of div with drag event so that the div also moves along with marker?
I was trying the following code in the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
But it still shows the same pixel position as previous time.

Answer 1

You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...
var startCoords;
var startLat;
var startLng;
var movedCoords;
var shiftLat;
var shiftLng;
map.on('dragstart', function() {
startCoords = map.getCenter();
startLat = startCoords.lat;
startLng = startCoords.lng;
console.log("STARTED FROM: " + startLat + "," +startLng);
});
map.on('drag', function() {
movedCoords = map.getCenter();
shiftLat = startLat - movedCoords.lat;
shiftLng = startLng - movedCoords.lng;
console.log("Shifted: " + shiftLat + "," + shiftLng);
//apply shift to custom div here...
});